Comment mettre à jour efficacement les objets dans un état de tableau ReactJS ?

Mise à jour des objets dans le tableau ReactJS : une exploration approfondie

Dans ReactJS, les tableaux dans un état contiennent souvent des objets. La mise à jour de ces objets peut être un défi. Cet article examine une méthode efficace pour accomplir cette tâche.

Comprendre le problème

Considérons l'exemple suivant :

var CommentBox = React.createClass({
  getInitialState: function() {
    return {data: [
      { id: 1, author: "john", text: "foo" },
      { id: 2, author: "bob", text: "bar" }
    ]};
  },
  handleCommentEdit: function(id, text) {
    var existingComment = this.state.data.filter({ function(c) { c.id == id; }).first();
    var updatedComments = ??; // not sure how to do this  

    this.setState({data: updatedComments});
  }
}

La fonction handleCommentEdit est responsable de la mise à jour de la propriété text d'un objet commentaire avec un identifiant spécifique. Cependant, la question se pose : comment créer un tableau de commentaires mis à jour ?

Une solution robuste

Une solution efficace consiste à utiliser Object.assign :

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

Cet extrait de code mappe les commentaires existants, préservant tous les objets inchangés. Pour l'objet avec l'identifiant correspondant, il crée un nouvel objet avec la propriété de texte mise à jour tout en conservant les propriétés d'origine.

Améliorations ES2018

Pour ceux qui adoptent la dernière version de JavaScript fonctionnalités, ES2018 fournit une solution encore plus concise en utilisant spread :

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

Avec spread, l'objet mis à jour peut être créé en remplaçant simplement la propriété text existante.

Conclusion

La mise à jour d'objets dans des tableaux dans ReactJS nécessite une gestion minutieuse de l'immuabilité des objets. En tirant parti de Object.assign ou spread, les développeurs peuvent mettre à jour efficacement les propriétés des objets tout en conservant l'intégrité du tableau d'origine. Ces méthodes fournissent une solution robuste et succincte à ce défi de programmation ReactJS courant.

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!