Die React-Komponente wird beim Aktualisieren des Status nicht erneut gerendert

Question

Ich denke, Sie haben eine bessere Lösung für dieses Problem: Ich habe eine Datei, die ein Array meiner Katzenobjekte enthält:

var columns = [
  {
    „id“: 1,
    „Name“: „Faktur“,
    „ausgewählt“: falsch
  },
  {
    "id": 2,
    "name" : "Telefony",
    „ausgewählt“: falsch
  },
  {
    "id": 3,
    „Name“: „Komputery“,
    „ausgewählt“: falsch
  },
  {
    "id": 4,
    „Name“: „Rachunkowośc“,
    „ausgewählt“: falsch
  },
  {
    "id": 5,
    „Name“: „Finanzen“,
    „ausgewählt“: falsch
  }
];

Ich habe:

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

Meine filterCategory-Funktion:

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

Wissen Sie, wie ich dies implementieren kann, ohne forceUpdate() zu verwenden? Ich habe auf Stack gelesen, dass die Verwendung von this.forceUpdate() vermieden werden sollte.

Answer 1

不要直接修改状态

使用setState方法进行状态更改。

Answer 2

使用setState会自动触发重新渲染，所以不要直接修改状态，而是使用setState来更新状态。

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

根据文档：