Mengapa `setState` Tidak Mengemas kini Keadaan Komponen Reaksi Saya Serta-merta?

Mengapa Memanggil Kaedah setState Tidak Mengubah Keadaan Serta-merta

Isunya

Walaupun nampaknya mengikut konvensyen dengan betul, kod yang disediakan menghadapi perkara yang tidak dijangka tingkah laku di mana pembolehubah keadaan (barClubLounge) tidak segera mencerminkan nilai yang dikehendaki selepas membuat panggilan setState. Nilai bertentangan sedang dikembalikan, menjadikan pembangun dalam keadaan membingungkan.

Sifat Asynchronous setState

Inti isu ini terletak pada sifat tak segerak bagi kaedah setState. Tidak seperti tugasan biasa, setState tidak segera mengubah keadaan. Sebaliknya, ia menjadualkan kemas kini keadaan yang akan dikendalikan kemudian oleh proses penyesuaian dalaman React. Ini membolehkan React mengoptimumkan dan mengemas kini keadaan kelompok untuk meningkatkan prestasi dan mengelakkan pemaparan semula yang tidak perlu.

Akibat Kemas Kini Keadaan Asynchronous

Disebabkan gelagat tak segerak, keadaan yang dikemas kini tidak boleh diperoleh semula nilai sejurus selepas memanggil setState. Jika anda cuba membaca pembolehubah keadaan (this.state.barClubLounge) terus selepas menetapkannya, anda mungkin mendapat nilai lama sehingga kemas kini keadaan selesai.

Penyelesaian: Menggunakan Kaedah Panggilan Balik

Untuk memintas isu ini dan menyemak nilai keadaan yang dikemas kini hanya selepas panggilan setState, React menyediakan kaedah panggil balik. Dengan menghantar fungsi sebagai panggilan balik kepada setState, anda boleh melakukan sebarang tindakan atau menyemak keadaan yang dikemas kini dalam panggilan balik itu, memastikan bahawa nilai keadaan telah dikemas kini dengan berkesan.

Contoh

Berikut ialah contoh menggunakan kaedah panggil balik:

this.setState({ barClubLounge: event.target.checked }, () => {
  console.log('Updated state value: ', this.state.barClubLounge);
});

Kini, panggilan balik akan dilaksanakan hanya selepas kemas kini setState selesai, menyediakan akses kepada nilai keadaan terkini.

Atas ialah kandungan terperinci Mengapa `setState` Tidak Mengemas kini Keadaan Komponen Reaksi Saya Serta-merta?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!