Comment supprimer en toute sécurité des éléments d'un tableau d'états dans React ?

Suppression d'éléments d'un tableau dans React : un guide

Dans React, la gestion de l'état est cruciale pour maintenir l'intégrité du comportement de votre application et expérience utilisateur. Un scénario courant implique la manipulation de tableaux dans un état, comme l'ajout, la suppression ou la mise à jour d'éléments.

Pour comprendre comment supprimer un élément d'un tableau d'état, prenons un exemple simple :

Vous souhaitez avoir une liste de trois personnes : Bob, Sally et Jack, stockée dans un tableau d'états. Vous devez pouvoir supprimer n'importe lequel d'entre eux de la liste, et une fois supprimé, le tableau ne doit avoir aucun emplacement vide.

Dans votre composant React, vous pouvez avoir le code suivant :

getInitialState: function() {
  return{
    people: [],
  }
},

selectPeople(e){
  this.setState({people: this.state.people.concat([e.target.value])})
},

removePeople(e){
  var array = this.state.people;
  var index = array.indexOf(e.target.value); // Let's say it's Bob.
  delete array[index];
},

Cependant, cette implémentation de la fonction removePeople() ne fonctionnera pas comme prévu lorsqu'elle est appelée. La raison réside dans la façon dont React gère la mutation d'état.

Ne jamais muter directement l'état dans React

Lors de la mise à jour d'un objet ou d'un tableau dans l'état, il est essentiel de créer un nouveau copie. La mutation directe de l'objet ou du tableau d'état d'origine peut entraîner un comportement inattendu et des bugs potentiels.

Dans ce cas, la suppression directe d'un élément du tableau, qui modifie l'objet d'état d'origine, ne déclenche pas de mise à jour du état dans React. L'état reste inchangé et l'interface utilisateur ne reflétera pas la suppression de Bob de la liste.

Utilisation d'Array.prototype.filter() pour une suppression sécurisée

Pour Pour supprimer un élément d'un tableau d'états d'une manière compatible avec React, il existe plusieurs options. Une méthode efficace consiste à utiliser Array.prototype.filter().

removePeople(e) {
    this.setState({people: this.state.people.filter(function(person) { 
        return person !== e.target.value 
    })});
}

Cette approche crée un nouveau tableau avec les résultats filtrés. Dans ce cas, il filtre la personne ayant la valeur cible, la supprimant ainsi de la liste. Le nouveau tableau résultant est ensuite défini comme état, déclenchant les mises à jour nécessaires de l'interface utilisateur pour refléter la suppression de l'élément.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!