Maison > Questions et réponses > le corps du texte
P粉7983434152023-08-24 12:39:53
Vous pouvez utiliser l'assistant d'immuabilité 更新
pour y parvenir : p>
this.setState({ items: update(this.state.items, {1: {name: {$set: 'updated field name'}}}) })
Alternativement, si vous ne vous souciez pas de pouvoir détecter les modifications apportées à cela à l'aide des méthodes de cycle de vie ===
在 shouldComponentUpdate()
, vous pouvez modifier l'état directement et forcer le rendu du composant - c'est en fait la même chose que la réponse de @limelights, car elle sort l'objet de l'état et le modifie.
this.state.items[1].name = 'updated field name' this.forceUpdate()
Modification ultérieure ajoutée :
Consultez les leçons de Simple Component Communication react-training pour un exemple de la façon de transmettre une fonction de rappel d'un composant parent en état de maintien à un composant enfant qui doit déclencher un changement d'état.
P粉7093078652023-08-24 12:38:33
Voici comment procéder sans bibliothèques d'assistance :
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}); },
Vous pouvez combiner les étapes 2 et 3 si besoin :
let item = { ...items[1], name: 'newName' }
Ou vous pouvez tout faire en une seule ligne :
this.setState(({items}) => ({ items: [ ...items.slice(0,1), { ...items[1], name: 'newName', }, ...items.slice(2) ] }));
Remarque : j'ai créé items
sous forme de tableau. OP a utilisé un objet. Cependant, le concept est le même.
Vous pouvez voir ce qui se passe dans le terminal/console :
❯ node > items = [{name:'foo'},{name:'bar'},{name:'baz'}] [ { name: 'foo' }, { name: 'bar' }, { name: 'baz' } ] > clone = [...items] [ { name: 'foo' }, { name: 'bar' }, { name: 'baz' } ] > item1 = {...clone[1]} { name: 'bar' } > item1.name = 'bacon' 'bacon' > clone[1] = item1 { name: 'bacon' } > clone [ { name: 'foo' }, { name: 'bacon' }, { name: 'baz' } ] > items [ { name: 'foo' }, { name: 'bar' }, { name: 'baz' } ] // good! we didn't mutate `items` > items === clone false // these are different objects > items[0] === clone[0] true // we don't need to clone items 0 and 2 because we're not mutating them (efficiency gains!) > items[1] === clone[1] false // this guy we copied