阵营组件不上更新状态

重新渲染我想你知道这更好的解决办法：我有对象的数组和我的猫文件：阵营组件不上更新状态

var categories = [ 
    { 
    "id": 1, 
    "name" : "Faktury", 
    "selected" : false 
    }, 
    { 
    "id": 2, 
    "name" : "Telefony", 
    "selected" : false 
    }, 
    { 
    "id": 3, 
    "name" : "Komputery", 
    "selected" : false 
    }, 
    { 
    "id": 4, 
    "name" : "Rachunkowośc", 
    "selected" : false 
    }, 
    { 
    "id": 5, 
    "name" : "Finanse", 
    "selected" : false 
    } 
];

和我有：

<ul className="category"> 
    {this.state.categories.map((item,index) => 
    <li onClick={()=>this.filterCategory(item,index)} key={item.id} className={item.selected? 'active' : ''}>{item.name}</li> 
)} 
</ul>

和我filterCategory：

filterCategory(item,index) { 
    this.state.categories[index].selected = !this.state.categories[index].selected; 
    this.forceUpdate(); 
}

不要ü知道我能做到不forceUpdate() ？我已阅读栈我应该避免使用this.forceUpdate()

来源

2017-07-19 Paweł Baca

使用setState自动触发重新呈现，所以不是直接突变状态使用setState更新的状态。

filterCategory(item,index){ 
    var categories = [...this.state.categories]; 
    categories[index].selected = !categories[index].selected; 
    this.setState({categories}) 
}

按照DOCS：

从来没有直接发生变异this.state，如调用的setState（）之后可能代替您作出的突变。对待这个状态，就好像它是不可变的。

来源

2017-07-19 10:16:40

感谢它的工作！ –

我认为传播运算符不会做深层复制，它仍然会有所有对象的引用并影响状态值，运行下面的代码：'let obj = [{a：1}，{a：2}] ; let k = [... obj]; k [0] .a = 10; console.log（k，obj）;'[**检查此LINK **]（http://www.bambielli.com/til/2017-01-29-spread-operator-deep-copy/）正确我如果我失去了一些东西:) –

@MayankShukla你是事实正确。在Spread运算符文档中也提到了这一点：注意：扩展语法在复制数组时有效地达到一级。因此，它可能不适合复制多维数组，如下面的示例 –

Do Not Modify State Directly

使用的setState方法状态变化。

来源

2017-07-19 10:22:07

阵营组件不上更新状态

回答

相关问题