我认为你知道更好的解决方案: 我有一个包含我的猫的对象数组的文件:
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(item,index) {
this.state.categories[index].selected = !this.state.categories[index].selected;
this.forceUpdate();
}
你知道如何在没有 forceUpdate()
的情况下实现它吗?我已经读过堆栈我应该避免使用 this.forceUpdate()
最佳答案
使用 setState
会自动触发重新渲染,因此不要直接改变状态,而是使用 setState
来更新状态。
filterCategory(item,index){
var categories = [...this.state.categories];
categories[index].selected = !categories[index].selected;
this.setState({categories})
}
根据文档:
NEVER mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.
关于javascript - React 组件不会在更新状态时重新渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45187529/