Wie aktualisiere ich ein verschachteltes Objekt im Status in React mithilfe von 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>
    );
  }
});

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>
    );
  }
});

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});
},

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)
    ]
}));

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!