Comment puis-je mettre à jour efficacement des objets dans un tableau dans ReactJS ?

Mise à jour d'objets dans un tableau dans ReactJS : un guide complet

Dans ReactJS, lorsqu'il s'agit de tableaux dans le cadre de l'état, la mise à jour des objets dans ces tableaux peut être un problème. tâche difficile. Cet article vous fournira une solution optimale à ce problème.

En considérant l'exemple présenté dans le tutoriel :

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});
  }
}

Pour mettre à jour un objet dans le tableau 'data', nous utilisons la Méthode 'map' dans la variable updateComments :

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

Cette approche utilise 'Object.assign' pour fusionner l'objet existant avec les propriétés mises à jour, garantissant ainsi immuabilité. Alternativement, vous pouvez opter pour l'opérateur « spread », qui est compatible avec ES2018 :

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

En suivant ces techniques, vous pouvez facilement mettre à jour les objets dans les tableaux de vos applications ReactJS.

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!