Bagaimana untuk Mengemas kini `state.item[1]` dengan `setState` dalam React?

Cara Mengemas kini State.item[1] Menggunakan setState

Dalam aplikasi React, mengemas kini keadaan tatasusunan atau objek boleh menjadi rumit. Artikel ini akan memandu anda melalui 如何更新 state.item[1] dalam keadaan menggunakan setState, tugas biasa dalam React.

Masalah

Dalam komponen React yang disediakan, matlamatnya adalah untuk mencipta bentuk dinamik di mana pengguna boleh mereka bentuk medan mereka sendiri. Keadaan pada mulanya kelihatan seperti ini:

this.state.items[1] = {
  name: 'field 1',
  populate_at: 'web_start',
  same_as: 'customer_name',
  autocomplete_from: 'customer_name',
  title: ''
};

Isu timbul apabila cuba mengemas kini keadaan apabila pengguna menukar mana-mana nilai. Menyasarkan objek yang betul menjadi sukar.

Penyelesaian

Untuk mengemas kini keadaan dengan betul, ikut langkah berikut:

1. Buat salinan cetek item.
2. Buat salinan cetek bagi item yang ingin anda mutasi.
3. Ganti harta yang anda minati masuk.
4. Letakkannya semula ke dalam tatasusunan anda. Ambil perhatian bahawa anda sedang memutasi tatasusunan di sini, itulah sebabnya membuat salinan dahulu adalah penting.
5. Tetapkan keadaan kepada salinan baharu anda.

Contoh Pelaksanaan:

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

Alternatif Pelaksanaan:

• Menggabungkan langkah 2 dan 3:

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

• Pelaksanaan 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 `state.item[1]` dengan `setState` dalam React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!