Bagaimana untuk menggunakan setState untuk mengemas kini state.item dalam keadaan?

Question

Saya sedang mencipta aplikasi di mana pengguna boleh mereka bentuk borang mereka sendiri. Sebagai contoh. Nyatakan nama medan dan butiran lajur lain yang perlu disertakan.

Komponen ini tersedia sebagai JSFiddle.

Keadaan awal saya kelihatan seperti ini:

var DynamicForm = React.createClass({
  getInitialState: function() {
   var item = {};
   item[1] = { name: 'field 1', populate_at: 'web_start',
                same_as: 'nama_pelanggan',
                autolengkap daripada: 'nama_pelanggan', tajuk: '' };
   item[2] = { name: 'field 2', populate_at: 'web_end',
                same_as: 'nama_pengguna',
                    autolengkap daripada: 'nama_pengguna', tajuk: '' };

     kembalikan { item };
   },

  render: function() {
     var _ini = ini;
     kembali (
       <div>
         { Object.keys(this.state.items).map(function (key) {
           var item = _this.state.items[key];
           kembali (
             <div>
               <PopulateAtCheckboxes this={this}
                 checked={item.populate_at} id={key}
                   populate_at={data.populate_at} />
            </div>
            );
        }, ini)}
        <butang onClick={this.newFieldEntry}>Buat medan baharu</button>
        <butang onClick={this.saveAndContinue}>Simpan dan Teruskan</button>
      </div>
    );
  }

Saya mahu mengemas kini keadaan apabila pengguna menukar sebarang nilai, tetapi saya menghadapi masalah mencari objek yang betul:

var PopulateAtCheckboxes = React.createClass({
  handleChange: fungsi (e) {
     item = this.state.item[1];
     item.name = 'newName';
     item[1] = item;
     this.setState({item: item});
  },
  render: function() {
    var populateAtCheckbox = this.props.populate_at.map(function(value) {
      kembali (
        <label untuk={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>
      );
    }, ini);
    kembali (
      <div className="populate-at-checkboxes">
        {populateAtCheckbox}
      </div>
    );
  }
});

Bagaimana saya harus membuat this.setState supaya ia mengemas kini item[1].name?

Answer 1

Anda boleh menggunakan 更新penolong kebolehubah untuk mencapai ini :

this.setState({
  items: update(this.state.items, {1: {name: {$set: 'updated field name'}}})
})

Sebagai alternatif, jika anda tidak peduli untuk dapat mengesan perubahan pada ini menggunakan kaedah kitar hayat === 在 shouldComponentUpdate(), anda boleh mengedit keadaan secara terus dan memaksa komponen untuk dipaparkan semula - ini sebenarnya sama dengan jawapan @limelights, kerana ia menarik objek keluar dari keadaan dan Editnya.

this.state.items[1].name = 'updated field name'
this.forceUpdate()

---

Suntingan kemudian ditambahkan:

Lihat pelajaran dalam Komunikasi Komponen Mudah latihan tindak balas untuk contoh cara menghantar fungsi panggil balik daripada keadaan penahanan komponen induk kepada komponen anak yang perlu mencetuskan perubahan keadaan.

Answer 2

Begini cara melakukannya tanpa perpustakaan pembantu:

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

Anda boleh menggabungkan langkah 2 dan 3 jika perlu:

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

Atau anda boleh melakukan semuanya dalam satu baris:

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

Nota: Saya mencipta items sebagai tatasusunan. OP menggunakan objek. Walau bagaimanapun, konsepnya adalah sama.

---

Anda boleh melihat apa yang berlaku di terminal/konsol:

❯ node
> items = [{name:'foo'},{name:'bar'},{name:'baz'}]
[ { name: 'foo' }, { name: 'bar' }, { name: 'baz' } ]
> clone = [...items]
[ { name: 'foo' }, { name: 'bar' }, { name: 'baz' } ]
> item1 = {...clone[1]}
{ name: 'bar' }
> item1.name = 'bacon'
'bacon'
> clone[1] = item1
{ name: 'bacon' }
> clone
[ { name: 'foo' }, { name: 'bacon' }, { name: 'baz' } ]
> items
[ { name: 'foo' }, { name: 'bar' }, { name: 'baz' } ] // good! we didn't mutate `items`
> items === clone
false // these are different objects
> items[0] === clone[0]
true // we don't need to clone items 0 and 2 because we're not mutating them (efficiency gains!)
> items[1] === clone[1]
false // this guy we copied