Adakah Pendengar Acara React Memaparkan Perubahan Keadaan Tidak Dijangka dalam Komponen Fungsi?

Gelagat React Hooks yang Salah dengan Pendengar Acara

Dalam pertanyaan ini, kami menghadapi masalah semasa bekerja dengan React Hooks. Apabila menggunakan pendengar acara untuk mengendalikan klik butang, log konsol memaparkan keadaan yang salah.

Perihalan Masalah

Dalam Kotak CodeSandbox yang disediakan, ikuti langkah berikut :

1. Klik butang "Tambah kad" dua kali untuk mencipta dua kad.
2. Untuk kad pertama, klik "Button1" dan sahkan dalam konsol bahawa ia mencatatkan kehadiran kad dengan betul dua kad.
3. Untuk kad pertama, klik "Butang2," yang dikawal oleh pendengar acara. Perhatikan bahawa konsol kini hanya menunjukkan satu kad.

Tingkah laku ini tidak dijangka, kerana "Butang2" untuk kad pertama juga harus memaparkan kehadiran dua kad.

Isu ini berpunca daripada pengendalian pengendali acara yang berbeza dalam komponen CardsProvider dan Kad.

• Pembekal Kad: Pengendali acara ialah dicipta semula setiap kali komponen dipaparkan, merujuk keadaan lapuk apabila ditakrifkan.
• Kad: Pengendali acara didaftarkan semasa pemasangan komponen dan menerima keadaan baharu apabila diluluskan sebagai prop. Walau bagaimanapun, satu pengendali acara (handleCardClick) hanya didaftarkan sekali dan sentiasa merujuk kepada keadaan basi.

Pendekatan Penyelesaian

Mengatasi masalah ini memerlukan pertimbangan yang teliti pendekatan pengendalian peristiwa dalam komponen berfungsi menggunakan cangkuk useState. Berikut ialah beberapa pilihan:

1. Keadaan Boleh Ubah:

Gunakan useRef dan bukannya useState untuk memperkenalkan objek boleh ubah yang memegang keadaan semasa. Walaupun pendekatan ini membenarkan mutasi keadaan langsung, ia bertentangan dengan amalan yang disyorkan untuk pembangunan React.

2. Fungsi Pengemaskini Negeri:

Apabila pendengar acara didaftarkan, lulus fungsi pengemas kini keadaan yang menerima keadaan baharu dan bukannya keadaan lapuk daripada skop yang dilampirkan. Ini memastikan pendengar acara sentiasa mempunyai akses kepada keadaan yang paling terkini.

3. Pendaftaran Semula Pendengar Acara Manual:

Daftar semula pendengar acara setiap kali keadaan berubah. Ini memastikan panggilan balik sentiasa menerima maklumat keadaan terkini.

4. Pengendalian Acara Terbina Dalam:

Untuk pendengar acara dalam skop komponen, gunakan pengendalian acara terbina dalam React dengan mentakrifkan pendengar acara secara langsung dalam JSX. Ini menghapuskan keperluan untuk useEffect dan memastikan pendengar acara sentiasa menerima keadaan semasa.

Atas ialah kandungan terperinci Adakah Pendengar Acara React Memaparkan Perubahan Keadaan Tidak Dijangka dalam Komponen Fungsi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!