Maison >interface Web >js tutoriel >Comment supprimer en toute sécurité des éléments d'un tableau en état React ?

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

Susan Sarandon
Susan Sarandonoriginal
2024-11-16 04:19:03687parcourir

How to Safely Remove Items from an Array in React State?

Modification des listes d'éléments dans React : suppression d'éléments

Dans React, la gestion de l'état est cruciale pour manipuler les données de l'application. Imaginons un scénario dans lequel vous disposez d'un tableau appelé « personnes » dans votre état et vous devez en supprimer un élément (par exemple, « Bob »). Cependant, la simple suppression directe de l'élément peut ne pas produire le résultat souhaité.

Dans ce cas, il est essentiel d'éviter de muter directement les objets d'état (y compris les tableaux). Pour modifier efficacement le tableau "people", créez-en une nouvelle copie avec les modifications souhaitées.

Une approche consiste à utiliser la méthode Array.prototype.filter() :

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

Cette méthode crée un nouveau tableau contenant tous les éléments qui ne correspondent pas à la condition fournie (c'est-à-dire "Bob"). Le tableau "people" d'origine reste intact et le nouveau tableau est attribué à l'état, garantissant ainsi que votre application réagit correctement à l'état mis à jour.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn