Comment mettre à jour l'état imbriqué dans React à l'aide de l'approche impérative ?

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 nouvel 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 :

<code class="javascript">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});
},</code>

Dans cette approche, nous utilisons la syntaxe spread (...) pour créer des copies superficielles du tableau d'éléments et de l'objet item à l'index 1. Nous modifions ensuite la propriété name de l'élément copié et remplacez l'élément à l'index 1 par 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.

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!