Heim > Web-Frontend > js-Tutorial > Hauptteil

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

Linda Hamilton
Freigeben: 2024-11-02 16:07:02
Original
638 Leute haben es durchsucht

How to Update `state.item[1]` with `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: ''
};
Nach dem Login kopieren

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});
}
Nach dem Login kopieren

Alternative Implementierungen:

  • Kombination der Schritte 2 und 3:
let item = {...items[1], name: 'newName'}
Nach dem Login kopieren
  • Einzeilige Implementierung:
this.setState(({items}) => ({
  items: [
    ...items.slice(0, 1),
    {...items[1], name: 'newName'},
    ...items.slice(2)
  ]
}));
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage