Maison >interface Web >js tutoriel >Comment supprimer des éléments de l'état React sans laisser d'espaces ?

Comment supprimer des éléments de l'état React sans laisser d'espaces ?

Barbara Streisand
Barbara Streisandoriginal
2024-11-26 16:12:10351parcourir

How to Remove Items from React State Without Leaving Gaps?

Suppression d'éléments de l'état React

La question concerne la suppression d'un élément, tel que « Bob », d'un tableau dans l'état de React. Le défi vient de l'impératif de préserver l'intégrité du tableau sans laisser de postes vacants.

Auparavant, la tentative de suppression manuelle de Bob à l'aide de la mutation par suppression échouait. Au lieu de cela, une solution qui adhère aux principes de React est recommandée.

Manipulation de tableau immuable

React interdit la manipulation directe des valeurs d'état. Pour modifier un tableau dans un état, une nouvelle copie doit être créée.

Array.prototype.filter()

L'approche la plus simple consiste à exploiter Array.prototype. filter() pour construire un nouveau tableau en omettant l'élément à supprimer. Par exemple :

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

Ce code crée un nouveau tableau en parcourant chaque élément de this.state.people. Si le nom n'est pas égal à l'élément à supprimer (par exemple, "Bob"), il est conservé dans le nouveau tableau.

Conclusion

Utilisation de filter() garantit l'immuabilité de l'état et maintient l'intégrité du tableau, en éliminant tous les emplacements vides laissés par la suppression.

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