Comment supprimer un élément d'un tableau en état React tout en préservant l'immuabilité ?

Supprimer un élément d'un état de tableau dans React

Dans React, la gestion de l'état est cruciale pour maintenir les données internes du composant. Lorsqu'il s'agit de tableaux en état, le maintien de l'immuabilité est essentiel pour éviter les pièges courants.

Considérez le scénario de suppression d'un élément d'un tableau en état. Une approche courante consiste à muter le tableau d'origine à l'aide de Array.prototype.delete(), comme indiqué dans la question :

removePeople(e) {
  var array = this.state.people;
  var index = array.indexOf(e.target.value);
  delete array[index];
}

Cependant, dans React, il est recommandé d'éviter de muter directement l'état. Au lieu de cela, créez une nouvelle copie du tableau contenant les modifications souhaitées :

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

Cette approche utilise la méthode Array.prototype.filter() pour créer un nouveau tableau qui inclut tous les éléments sauf celui à supprimer. . Il ne mute pas le tableau d'origine, garantissant ainsi l'immuabilité de l'état.

En employant cette approche, vous maintenez l'intégrité de l'état et évitez les problèmes potentiels liés à la mutation d'état dans React.

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!