Comment mettre à jour avec élégance des objets dans des tableaux dans ReactJS ?

Mises à jour d'objets élégantes dans les tableaux pour ReactJS

Dans ReactJS, la gestion de tableaux d'objets dans l'état de votre application peut être un scénario courant. L'une de ces tâches consiste à mettre à jour un objet spécifique dans un tableau, ce qui peut poser un défi sans une compréhension claire des techniques disponibles.

Exemple de scénario

Considérez le React suivant exemple de composant :

var CommentBox = React.createClass({
  getInitialState: function() {
    return {
      data: [
        { id: 1, author: "john", text: "foo" },
        { id: 2, author: "bob", text: "bar" },
      ],
    };
  },
  handleCommentEdit: function(id, text) {
    // Handle updating of the object inside the array
  },
});

L'objectif est de mettre à jour l'objet dans this.state.data lorsque la méthode handleCommentEdit est appelée, en modifiant spécifiquement le texte property.

Approche Object.assign()

Une méthode généralement préférée consiste à utiliser Object.assign(). Il offre un moyen concis de mettre à jour un objet existant sans en créer un nouveau.

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

Ici, nous parcourons chaque élément de this.state.data. Si l'identifiant d'un élément correspond à l'identifiant fourni, nous créons un nouvel objet en combinant l'el d'origine avec le texte mis à jour à l'aide de Object.assign(). Sinon, nous renvoyons l'élément d'origine.

Approche de l'opérateur de spread

Pour une approche plus moderne, vous pouvez utiliser l'opérateur de spread ES2018 :

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

Semblable à la méthode Object.assign(), nous utilisons l'opérateur spread pour créer un nouvel objet, en combinant l'objet d'origine avec le texte mis à jour propriété.

Les approches Object.assign() et l'opérateur de propagation offrent un moyen efficace et élégant de mettre à jour les objets dans un tableau tout en conservant l'immuabilité dans les 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!