Mengapa State Tidak Betul Apabila Mengendalikan Acara dengan Pendengar Acara dalam React Hooks?

Gelagat Cangkuk Reaksi Salah dengan Pendengar Acara

Masalah: Apabila menggunakan React Hooks dan mengendalikan acara dengan pendengar acara, keadaan dipaparkan dalam konsol adalah tidak betul. Khususnya, mengklik butang di dalam kad sepatutnya menunjukkan keadaan yang dikemas kini (bilangan kad), tetapi ia salah memaparkan keadaan asal.

Penjelasan Kod:

Masalahnya timbul disebabkan oleh cara pendengar acara didaftarkan dalam komponen berfungsi menggunakan cangkuk useState. Dalam contoh yang diberikan, fungsi handleCardClick ditakrifkan dalam komponen fungsi CardsProvider, dan ia sentiasa merujuk keadaan awal apabila dipanggil.

Sebaliknya, handleButtonClick ditakrifkan dalam komponen fungsi Kad dan diluluskan sebagai prop. Memandangkan ia didaftarkan semula pada setiap pemaparan, ia merujuk kepada keadaan baharu. Oleh itu, semasa handleCardClick memaparkan keadaan yang salah, handleButtonClick memaparkan keadaan yang betul.

Penyelesaian:

1. Keadaan Boleh Ubah:

Daripada useState, gunakan useRef untuk menyimpan keadaan boleh ubah. Walau bagaimanapun, pendekatan ini tidak disyorkan untuk mengemas kini keadaan, kerana ia adalah anti-corak dalam kedua-dua komponen kelas dan fungsi.

2. Fungsi Pengemaskini Negeri:

Gunakan fungsi pengemas kini keadaan di dalam pendengar acara yang menerima keadaan baharu dan bukannya keadaan lapuk.

3. Pendaftaran Semula Pendengar Acara Manual:

Daftar semula pendengar acara setiap kali, memastikan ia mempunyai akses kepada keadaan terkini.

4. Pengendalian Acara Terbina dalam:

Gunakan pengendalian acara terbina dalam React dengan menghantar pendengar acara terus ke pengendali acara DOM, seperti onClick={eventListener}.

Nota: Dalam versi akhir React 16.8, useState hanya menyokong keadaan tidak berubah. Oleh itu, penyelesaian keadaan boleh ubah yang diterangkan dalam jawapan asal tidak lagi terpakai.

Atas ialah kandungan terperinci Mengapa State Tidak Betul Apabila Mengendalikan Acara dengan Pendengar Acara dalam React Hooks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!