Bagaimana untuk Mengemas kini Objek Bersarang dalam State dalam React Menggunakan setState?

Cara Mengemas kini Objek dalam Keadaan Bersarang Menggunakan setState dalam React

Dalam React, adalah perkara biasa untuk menemui objek keadaan bersarang yang memerlukan sasaran kemas kini berdasarkan input pengguna. Pertimbangkan coretan kod berikut:

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

Dalam komponen ini, keadaan terdiri daripada objek bersarang, item, yang mengandungi item yang diindeks mengikut kedudukannya. Walau bagaimanapun, matlamatnya adalah untuk mengemas kini item tertentu dalam objek item semasa interaksi pengguna.

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

Walaupun pendekatan di atas cuba mengemas kini keadaan, ini bukan cara yang disyorkan untuk memutasi objek keadaan bersarang dalam React. Untuk memastikan kebolehubahan dan mengelakkan kesan sampingan yang tidak diingini, pendekatan yang betul ialah mencipta salinan cetek objek keadaan, kemudian mengubah suai salinan dan akhirnya menetapkan keadaan kepada salinan yang diubah suai.

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

Sebagai alternatif, jika anda lebih suka pendekatan yang lebih ringkas, anda boleh menggunakan sintaks penyebaran untuk mencapai hasil yang sama dalam satu baris:

this.setState(({items}) => ({
    items: [
        ...items.slice(0,1),
        {
            ...items[1],
            name: 'newName',
        },
        ...items.slice(2)
    ]
}));

Atas ialah kandungan terperinci Bagaimana untuk Mengemas kini Objek Bersarang dalam State dalam React Menggunakan setState?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!