Wie aktualisiere ich „state.item[1]' mit „setState' in React?

So aktualisieren Sie State.item[1] mit setState

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.

Problem

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.

Lösung

Um den Status korrekt zu aktualisieren, befolgen Sie diese Schritte:

1. Erstellen Sie eine flache Kopie der Elemente.
2. Erstellen Sie eine flache Kopie des Elements, das Sie mutieren möchten.
3. Ersetzen Sie die Eigenschaft, an der Sie interessiert sind.
4. Fügen Sie sie wieder in Ihr Array ein. Beachten Sie, dass Sie hier das Array verändern, weshalb es wichtig ist, zuerst eine Kopie zu erstellen.
5. Stellen Sie den Status auf Ihre neue Kopie ein.

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:

• Kombination der Schritte 2 und 3:

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

• Einzeilige Implementierung:

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!