In einer React-Anwendung kann das Aktualisieren des Status eines Arrays oder Objekts schwierig sein. Dieser Artikel führt Sie durch die Verwendung von state.item[1] im Status mithilfe von setState, einer häufigen Aufgabe in React.
Innerhalb der bereitgestellten React-Komponente besteht das Ziel darin, Folgendes zu erstellen ein dynamisches Formular, in dem Benutzer ihre eigenen Felder entwerfen können. Der Status sieht zunächst so aus:
this.state.items[1] = { name: 'field 1', populate_at: 'web_start', same_as: 'customer_name', autocomplete_from: 'customer_name', title: '' };
Das Problem tritt auf, wenn versucht wird, den Status zu aktualisieren, wenn ein Benutzer einen der Werte ändert. Es wird schwierig, das richtige Objekt anzuvisieren.
Um den Status korrekt zu aktualisieren, befolgen Sie diese Schritte:
Beispielimplementierung:
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}); }
Alternative Implementierungen:
let item = {...items[1], name: 'newName'}
this.setState(({items}) => ({ items: [ ...items.slice(0, 1), {...items[1], name: 'newName'}, ...items.slice(2) ] }));
Das obige ist der detaillierte Inhalt vonWie aktualisiere ich „state.item[1]' mit „setState' in React?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!