Comment mettre à jour `state.item[1]` avec `setState` dans React ?

Comment mettre à jour State.item[1] À l'aide de setState

Dans une application React, mettre à jour l'état d'un tableau ou d'un objet peut être délicat. Cet article vous guidera à travers le state.item[1] dans l'état utilisant setState, une tâche courante dans React.

Problème

Dans le composant React fourni, l'objectif est de créer un formulaire dynamique où les utilisateurs peuvent concevoir leurs propres champs. L'état ressemble initialement à ceci :

this.state.items[1] = {
  name: 'field 1',
  populate_at: 'web_start',
  same_as: 'customer_name',
  autocomplete_from: 'customer_name',
  title: ''
};

Le problème survient lors de la tentative de mise à jour de l'état lorsqu'un utilisateur modifie l'une des valeurs. Cibler le bon objet devient difficile.

Solution

Pour mettre à jour l'état correctement, suivez ces étapes :

1. Faites une copie superficielle des éléments.
2. Faites une copie superficielle de l'élément que vous souhaitez muter.
3. Remplacez la propriété qui vous intéresse.
4. Remettez-la dans votre tableau. Notez que vous êtes en train de muter le tableau ici, c'est pourquoi il est crucial de faire d'abord une copie.
5. Définissez l'état sur votre nouvelle copie.

Exemple de mise en œuvre :

handleChange: function (e) {
  // 1. Make a shallow copy of the items
  let items = [...this.state.items];
  // 2. Make a shallow copy of the item you want to mutate
  let item = {...items[1]};
  // 3. Replace the property you're intested in
  item.name = 'newName';
  // 4. Put it back into our array. N.B. we *are* mutating the array here, 
  //    but that's why we made a copy first
  items[1] = item;
  // 5. Set the state to our new copy
  this.setState({items});
}

Implémentations alternatives :

• Combinaison des étapes 2 et 3 :

let item = {...items[1], name: 'newName'}

• Implémentation sur une seule ligne :

this.setState(({items}) => ({
  items: [
    ...items.slice(0, 1),
    {...items[1], name: 'newName'},
    ...items.slice(2)
  ]
}));

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!