React元件在更新狀態時不會重新渲染

Question

我認為你對這個問題有更好的解決方案： 我有一個包含我的貓物件陣列的檔案：

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()的情況下實現它嗎？我在Stack上讀到應該避免使用this.forceUpdate()。

Answer 1

不要直接修改狀態

#

使用setState方法進行狀態變更。

Answer 2

使用setState會自動觸發重新渲染，所以不要直接修改狀態，而是使用setState來更新狀態。

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

根據文件：