React组件不会在更新状态时重新呈现

小编典典

React组件不会在更新状态时重新呈现

reactjs

我认为您对此有更好的解决方案：我的猫中有一些带有对象数组的文件：

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()

阅读 314

2020-07-22

共1个答案

小编典典

使用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视为不可变的。

2020-07-22