Comment supprimer un élément d'un tableau d'états dans React tout en conservant l'immuabilité ?

React : Supprimer un élément d'un tableau d'états

Dans React, la maintenance efficace des données est cruciale. Lorsque vous travaillez avec des tableaux dans un état, il est essentiel de préserver l'immuabilité. La modification directe des tableaux peut entraîner un comportement inattendu.

Le défi

Imaginez un scénario dans lequel les individus « Bob », « Sally » et « Jack » sont stockés dans un tableau d'états "personnes". L'objectif est de supprimer un individu, tel que « Bob », du tableau sans laisser d'emplacement vide.

La solution incorrecte

La méthode RemovePeople() présentée tente de supprimer un élément en définissant l'élément du tableau à l'index souhaité sur non défini. Cependant, cette approche mute directement l'état, violant le principe d'immuabilité de React.

La méthode React

Pour supprimer de manière appropriée un élément d'un tableau d'états, évitez de le muter directement. Au lieu de cela, créez un nouveau tableau avec le contenu modifié :

removePeople(e) {
    const updatedPeople = this.state.people.filter(person => person !== e.target.value);
    this.setState({people: updatedPeople});
}

Filter() à la rescousse

Array.prototype.filter() est un outil puissant pour créer de nouveaux tableaux en fonction de conditions spécifiées. Dans ce cas, il est utilisé pour exclure la personne cible du tableau "people" d'origine.

L'immuabilité est la clé

React s'appuie fortement sur des structures de données immuables. Le maintien de l'immuabilité garantit la cohérence des données, évite les mutations d'état inattendues et simplifie le débogage. En créant de nouvelles instances de tableaux, comme démontré dans l'approche filter(), vous préservez ce principe critique dans le développement de 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!