Komponen bertindak balas tidak dipaparkan semula semasa mengemas kini keadaan

Question

Saya rasa anda mempunyai penyelesaian yang lebih baik untuk masalah ini: Saya mempunyai fail yang mengandungi tatasusunan objek kucing saya:

var categories = [
  {
    "id": 1,
    "nama" : "Fakturi",
    "dipilih" : palsu
  },
  {
    "id": 2,
    "nama" : "Telefon",
    "dipilih" : palsu
  },
  {
    "id": 3,
    "name" : "Komputer",
    "dipilih" : palsu
  },
  {
    "id": 4,
    "nama" : "Rachunkowośc",
    "dipilih" : palsu
  },
  {
    "id": 5,
    "nama" : "Kewangan",
    "dipilih" : palsu
  }
];

Saya ada:

<ul className="category">
  {this.state.categories.map((item,index) =>
    <li onClick={()=>this.filterCategory(item,index)} key={item.id} className={item.selected? : ''}>{item.name}< /li>
  )}
</ul>

Fungsi Kategori penapis saya:

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

Adakah anda tahu bagaimana saya boleh melaksanakan ini tanpa menggunakan forceUpdate()? Saya membaca di Stack bahawa menggunakan this.forceUpdate()

Answer 1

Jangan ubah suai status terus

Gunakan kaedah setState untuk perubahan keadaan.

Answer 2

Gunakan setState会自动触发重新渲染，所以不要直接修改状态，而是使用setState untuk mengemas kini status anda.

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

Mengikut dokumentasi: