我认为您对此有更好的解决方案:我的猫中有一些带有对象数组的文件:
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()
forceUpdate()
this.forceUpdate()
使用setState自动触发重新渲染,因此可以使用setState状态更新来代替直接改变状态。
setState
filterCategory(item,index){ var categories = [...this.state.categories]; categories[index].selected = !categories[index].selected; this.setState({categories}) }
根据DOCS:
切勿直接更改this.state,因为此后调用setState()可能会替换您所做的更改。将此this.state视为不可变的。