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.
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.
Pour mettre à jour l'état correctement, suivez ces étapes :
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 :
let item = {...items[1], name: 'newName'}
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!