Heim > Web-Frontend > js-Tutorial > Wie aktualisiere ich ein verschachteltes Objekt im Status in React mithilfe von setState?

Wie aktualisiere ich ein verschachteltes Objekt im Status in React mithilfe von setState?

Barbara Streisand
Freigeben: 2024-11-02 07:07:02
Original
1067 Leute haben es durchsucht

How to Update a Nested Object within State in React Using setState?

So aktualisieren Sie ein Objekt innerhalb eines verschachtelten Zustands mithilfe von setState in React

In React stößt man häufig auf verschachtelte Zustandsobjekte, die gezielt angesprochen werden müssen Aktualisierungen basierend auf Benutzereingaben. Betrachten Sie den folgenden Codeausschnitt:

var DynamicForm = React.createClass({
  getInitialState: function() {
   var items = {};
   items[1] = { name: 'field 1', populate_at: 'web_start',
                same_as: 'customer_name',
                autocomplete_from: 'customer_name', title: '' };
   items[2] = { name: 'field 2', populate_at: 'web_end',
                same_as: 'user_name', 
                    autocomplete_from: 'user_name', title: '' };

     return { items };
   },

  render: function() {
     var _this = this;
     return (
       <div>
         { Object.keys(this.state.items).map(function (key) {
           var item = _this.state.items[key];
           return (
             <div>
               <PopulateAtCheckboxes this={this}
                 checked={item.populate_at} id={key} 
                   populate_at={data.populate_at} />
            </div>
            );
        }, this)}
        <button onClick={this.newFieldEntry}>Create a new field</button>
        <button onClick={this.saveAndContinue}>Save and Continue</button>
      </div>
    );
  }
});
Nach dem Login kopieren

In dieser Komponente besteht der Status aus einem verschachtelten Objekt, „items“, das Elemente enthält, die nach ihrer Position indiziert sind. Das Ziel besteht jedoch darin, bei Benutzerinteraktion ein bestimmtes Element innerhalb des Elementobjekts zu aktualisieren.

var PopulateAtCheckboxes = React.createClass({
  handleChange: function (e) {
     item = this.state.items[1];
     item.name = 'newName';
     items[1] = item;
     this.setState({items: items});
  },
  render: function() {
    var populateAtCheckbox = this.props.populate_at.map(function(value) {
      return (
        <label for={value}>
          <input type="radio" name={'populate_at'+this.props.id} value={value}
            onChange={this.handleChange} checked={this.props.checked == value}
            ref="populate-at"/>
          {value}
        </label>
      );
    }, this);
    return (
      <div className="populate-at-checkboxes">
        {populateAtCheckbox}
      </div>
    );
  }
});
Nach dem Login kopieren

Während der obige Ansatz versucht, den Status zu aktualisieren, ist dies nicht die empfohlene Methode, um verschachtelte Statusobjekte in React zu ändern. Um die Unveränderlichkeit sicherzustellen und unerwünschte Nebenwirkungen zu verhindern, besteht der richtige Ansatz darin, eine flache Kopie des Statusobjekts zu erstellen, dann die Kopie zu ändern und schließlich den Status auf die geänderte Kopie festzulegen.

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 interested 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

Alternativ, wenn Sie Bevorzugen Sie einen prägnanteren Ansatz, können Sie die Spread-Syntax verwenden, um das gleiche Ergebnis in einer Zeile zu erzielen:

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 ein verschachteltes Objekt im Status in React mithilfe von setState?. 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