状態を更新するときに React コンポーネントが再レンダリングされない

Question

この問題にはもっと良い解決策があると思います: 私の猫オブジェクトの配列を含むファイルがあります:

var category = [
  {
    「id」: 1、
    "名前" : "工場",
    「選択済み」: false
  }、
  {
    「id」: 2、
    "名前" : "電話",
    「選択済み」: false
  }、
  {
    「id」: 3、
    "名前" : "コンピュータ",
    「選択済み」: false
  }、
  {
    「id」: 4、
    "名前" : "ラチュンコウォシュク",
    「選択済み」: false
  }、
  {
    "id": 5、
    "名前" : "フィナンセ",
    「選択済み」: 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[インデックス].selected = !this.state.categories[インデックス].selected;
  this.forceUpdate();
}

forceUpdate() を使用せずにこれを実装する方法を知っていますか? Stack で this.forceUpdate() の使用は避けるべきだと読みました。

Answer 1

ステータスを直接変更しないでください

setState メソッドを使用して状態を変更します。

Answer 2

setState を使用すると、自動的に再レン​​ダリングがトリガーされるため、状態を直接変更せず、setState を使用して状態を更新します。 リーリー

ドキュメントによると: