Mengapa React Hooks Menunjukkan Gelagat Keadaan Tidak Konsisten dengan Pendengar Acara?

Gelagat React Hooks yang Salah dengan Pendengar Acara

Gambaran Keseluruhan

Artikel ini membincangkan isu yang dihadapi semasa menggunakan React Hooks, khususnya mengenai tingkah laku yang tidak konsisten nyatakan pengelogan konsol apabila dicetuskan oleh pendengar acara dalam komponen tersuai.

Pernyataan Masalah

Pertimbangkan CodeSandbox yang diberikan: https://codesandbox.io/s/lrxw1wr97m. Ikuti langkah berikut:

1. Klik butang "Tambah kad" dua kali untuk mencipta dua kad.
2. Dalam kad pertama, klik "Button1" untuk memaparkan bilangan kad yang betul (2 ) dalam konsol.
3. Dalam kad pertama, klik "Butang2" (yang dikendalikan oleh pendengar acara) untuk melihat paparan yang salah hanya satu kad dalam konsol.

Isu timbul apabila cuba memaparkan keadaan dikemas kini dari dalam pendengar acara yang dilampirkan pada "Butang2".

Punca Punca

Percanggahan dalam paparan keadaan berpunca daripada cara yang berbeza pengendali acara dilaksanakan dalam komponen CardsProvider dan Card.

• CardsProvider: Pengendali acara ditakrifkan dalam skop komponen berfungsi, mencipta fungsi baharu dengan rujukan kepada keadaan semasa pada masa definisi.
• Kad: Pengendali acara diterima sebagai prop dan didaftarkan sekali pada pelekap komponen. Walau bagaimanapun, pengendali ini merujuk keadaan lapuk yang mungkin tidak mewakili keadaan semasa.

Penyelesaian

Beberapa pendekatan boleh menyelesaikan isu ini:

Keadaan Boleh Berubah :

Nilai keadaan boleh ubah seperti yang disediakan oleh useRef boleh digunakan untuk mengekalkan perubahan keadaan terkini. Walau bagaimanapun, kaedah ini tidak disyorkan kerana useState bertujuan untuk menguruskan keadaan tidak berubah.

Fungsi Pengemas Kini Keadaan:

Menggunakan fungsi pengemas kini keadaan membenarkan untuk menghantar keadaan terkini kepada panggil balik, memastikan keadaan yang dipaparkan sentiasa terkini.

Pendaftaran Semula Pendengar Acara Manual:

Sebagai alternatif, pendengar acara boleh didaftarkan semula dengan setiap kemas kini negeri ke menjamin akses kepada keadaan semasa.

Pengendalian Acara Terbina dalam:

Apabila boleh, menggunakan mekanisme pengendalian acara DOM asli React menghapuskan keperluan untuk pengurusan pendengar acara manual.

Ringkasan

Ketidakkonsistenan dalam paparan keadaan dengan pengendalian pendengar acara boleh dikaitkan dengan layanan yang berbeza bagi pengendali acara dalam komponen yang terjejas. Dengan menggunakan penyelesaian yang sesuai, pembangun boleh mengurangkan isu ini dan mengekalkan tingkah laku keadaan yang betul.

Atas ialah kandungan terperinci Mengapa React Hooks Menunjukkan Gelagat Keadaan Tidak Konsisten dengan Pendengar Acara?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!