Bagaimanakah Saya Boleh Mengemas kini Sifat Keadaan Bersarang Dalam dengan Cekap dalam React?

Kemas Kini Keadaan Dalam dalam React dengan Nested Properties

Apabila mengurus keadaan dalam React, adalah perkara biasa untuk menyusun data ke dalam sifat bersarang untuk organisasi yang lebih baik. Walau bagaimanapun, mengemas kini sifat keadaan bersarang secara langsung boleh membawa kepada akibat yang tidak diingini.

Masalahnya:

Pertimbangkan struktur keadaan berikut:

this.state = {
   someProperty: {
      flag: true
   }
}

Mengemas kini keadaan menggunakan pendekatan ini:

this.setState({ someProperty.flag: false });

...tidak akan berfungsi seperti yang dimaksudkan. Kaedah setState React tidak mengendalikan kemas kini bersarang.

Penyelesaian: Pengklonan dan Kemas Kini

Satu penyelesaian ialah mengklon harta bersarang, melaksanakan kemas kini dan kemudian menetapkan kemas kini harta dalam keadaan:

var someProperty = {...this.state.someProperty}
someProperty.flag = false;
this.setState({someProperty})

Pengendali hamparan (...) mencipta salinan cetek objek. Walau bagaimanapun, jika keadaan anda menjadi sangat bersarang, pendekatan ini mungkin menjadi membosankan dan terdedah kepada ralat.

Penolong Keabadian

Untuk kemas kini keadaan bersarang yang lebih kompleks, pertimbangkan untuk menggunakan kebolehubah -pakej pembantu. Ia menyediakan cara yang mudah untuk mengemas kini objek bersarang secara kekal, memastikan keadaan asal tidak bermutasi.

Sebagai contoh, untuk mengemas kini sifat bersarang dalam menggunakan immutability-helper:

this.setState(({someProperty}) => {
   return update(someProperty, { $set: { flag: false } })
})

Immutability -helper memastikan objek someProperty asal tidak diubah suai, sebaliknya objek baharu dikembalikan dengan sifat bendera yang dikemas kini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengemas kini Sifat Keadaan Bersarang Dalam dengan Cekap dalam React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!