Comment mettre à jour de manière immuable des objets dans des tableaux dans l'état React ?

Mise à jour des objets d'état dans les tableaux ReactJS

Lorsque vous travaillez avec des tableaux dans le cadre de l'état d'une application, vous pouvez rencontrer le besoin de mettre à jour des objets individuels au sein de ces tableaux. Il s'agit d'une tâche courante lors de la gestion des données utilisateur, des valeurs de formulaire ou d'autres contenus dynamiques.

Gestion des mises à jour d'état

Dans l'exemple fourni, un composant CommentBox est défini avec un état initial contenant un tableau d'objets commentaires. La fonction handleCommentEdit est chargée de mettre à jour le commentaire avec l'identifiant et le texte spécifiés.

Immuabilité dans React

L'un des principes fondamentaux de React est l'utilisation d'un état immuable. Cela signifie que l’objet d’état d’origine ne doit jamais être muté directement. Au lieu de cela, un nouvel objet d'état doit être créé avec les modifications souhaitées.

Mise à jour d'un objet à l'aide de Object.assign

Une approche pour mettre à jour un objet dans un tableau consiste à utiliser la méthode Object.assign. Cette méthode prend l'objet existant comme premier argument et les arguments suivants comme paires clé-valeur qui doivent être fusionnées dans l'objet d'origine. L'objet résultant est un nouvel objet avec les modifications souhaitées.

Dans l'extrait de code fourni, cette approche est implémentée comme suit :

handleCommentEdit: function(id, text) {
    this.setState({
      data: this.state.data.map(el => (el.id === id ? Object.assign({}, el, { text }) : el))
    });
}

Mise à jour de l'objet à l'aide de Spread

Dans ES2018 et versions ultérieures, l'opérateur spread (...) peut être utilisé pour obtenir un résultat similaire à Object.assign. L'opérateur spread fusionne les propriétés de l'objet existant avec les paires clé-valeur fournies.

L'extrait de code suivant montre comment utiliser l'opérateur spread pour mettre à jour l'objet commentaire :

this.setState({
  data: this.state.data.map(el => (el.id === id ? {...el, text} : el))
});

Conclusion

Ces techniques vous permettent de mettre facilement à jour des objets individuels au sein d'un tableau dans ReactJS, tout en adhérant à l'immuabilité principes du cadre.

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!