Approche impérative de la mise à jour de l'état imbriqué

Dans React, les mises à jour d'état sont immuables. Cela signifie que pour mettre à jour un objet ou un tableau imbriqué, vous ne pouvez pas simplement modifier ses propriétés et vous attendre à ce que les modifications soient reflétées dans l'interface utilisateur. Au lieu de cela, vous devez créer un nouvel objet ou un tableau qui inclut les valeurs mises à jour, puis le transmettre à setState.

Considérez l'exemple suivant, dans lequel nous souhaitons mettre à jour la propriété name de l'objet à l'index 1 dans le tableau d'éléments stocké dans l'état :

handleChange: function (e) {
  // Make a copy of the items array
  let items = [...this.state.items];

  // Make a copy of the item object at index 1
  let item = {...items[1]};

  // Change the name property of the copied item
  item.name = 'New Name';

  // Replace the item at index 1 with the updated item
  items[1] = item;

  // Update the state with the new items array
  this.setState({items});
},

Dans cette approche, nous utilisons la syntaxe étalée (...) pour créer des copies superficielles du tableau items et de l'objet item à l'index 1. Nous modifions ensuite la propriété name de l'élément copié et remplaçons le élément à l'index 1 avec la version mise à jour. Enfin, nous mettons à jour l'état avec le nouveau tableau d'éléments.

Cette approche est simple et fonctionne bien pour les mises à jour d'état simples. Cependant, cela peut devenir fastidieux et sujet aux erreurs pour les mises à jour d'état complexes impliquant plusieurs objets ou tableaux imbriqués.