Maison > interface Web > js tutoriel > le corps du texte

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

Linda Hamilton
Libérer: 2024-11-02 16:07:02
original
638 Les gens l'ont consulté

How to Update `state.item[1]` with `setState` in 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: ''
};
Copier après la connexion

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});
}
Copier après la connexion

Implémentations alternatives :

  • Combinaison des étapes 2 et 3 :
let item = {...items[1], name: 'newName'}
Copier après la connexion
  • Implémentation sur une seule ligne :
this.setState(({items}) => ({
  items: [
    ...items.slice(0, 1),
    {...items[1], name: 'newName'},
    ...items.slice(2)
  ]
}));
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal