Le composant React ne s'affiche pas à nouveau lors de la mise à jour de l'état

Question

Je pense que vous avez une meilleure solution à ce problème : J'ai un fichier contenant un tableau de mes objets chat :

var catégories = [
  {
    "identifiant": 1,
    "name" : "Faktury",
    "sélectionné" : faux
  },
  {
    "identifiant": 2,
    "name" : "Téléphonie",
    "sélectionné" : faux
  },
  {
    "identifiant": 3,
    "name" : "Ordinateur",
    "sélectionné" : faux
  },
  {
    "identifiant": 4,
    "nom" : "Rachunkowośc",
    "sélectionné" : faux
  },
  {
    "identifiant": 5,
    "name" : "Finances",
    "sélectionné" : faux
  }
];≪/pré>
<p>J'ai : </p>
<pre class="brush:php;toolbar: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>

Ma fonction filterCategory :

filterCategory(item,index) {
  this.state.categories[index].selected = !this.state.categories[index].selected;
  this.forceUpdate();
}
Savez-vous comment je peux implémenter cela sans utiliser forceUpdate() ? J'ai lu sur Stack que l'utilisation de this.forceUpdate() 
            

Answer 1

Ne modifiez pas le statut directement

Utilisez la méthode setState pour les changements d'état.

Answer 2

Utilisez setState会自动触发重新渲染，所以不要直接修改状态，而是使用setState pour mettre à jour votre statut.

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

Selon la documentation :