Apabila Menggunakan React Hooks dan Pendengar Acara, Mengapa Log Konsol Negeri Memaparkan Maklumat yang Tidak Betul?

Pendengar Acara dan Cangkuk Reaksi

Masalah: Apabila menggunakan cangkuk React dan pendengar acara, log konsol keadaan memaparkan maklumat yang salah.

Penerangan Masalah

Pertimbangkan CodeSandbox yang disediakan: https://codesandbox.io/s/lrxw1wr97m. Apabila anda mengklik butang "Tambah kad" dua kali, dan kemudian klik "Button1" dalam kad pertama, konsol memaparkan keadaan dengan dua kad dengan betul. Walau bagaimanapun, jika anda mengklik "Button2" dalam kad yang sama (yang dikendalikan oleh pendengar acara), konsol tersalah memaparkan hanya satu kad dalam keadaan.

Sebab Keadaan Tidak Betul

isu timbul daripada layanan berbeza terhadap pengendali acara dalam komponen CardsProvider dan Kad. Pengendali acara yang ditakrifkan dalam komponen berfungsi CardsProvider, handleCardClick dan handleButtonClick, ditakrifkan semula setiap kali komponen itu dipaparkan. Ini bermakna mereka merujuk kepada keadaan pada masa ia ditakrifkan, yang boleh menjadi basi apabila pendengar acara dicetuskan.

Sebaliknya, komponen Kad menggunakan useRef untuk mendaftarkan pendengar acara, yang berterusan sepanjang kitaran hayat komponen. Akibatnya, fungsi pendengar acara merujuk kepada keadaan pada masa komponen dipasang, iaitu lapuk.

Penyelesaian - Menggunakan Fungsi Pengemas Kini Negeri

Satu penyelesaian ialah menggunakan pengemas kini keadaan fungsi yang menerima keadaan baharu sebagai hujah, dan bukannya bergantung pada keadaan lapuk daripada skop yang disertakan:

<code class="javascript">const eventListener = () => {
  // Function receives fresh state
  setState(freshState => freshState + 1);
};

// Event listener is registered using `useEffect` to ensure it is only registered once
useEffect(() => {
  // Register event listener
  // ...

  // Unregister event listener on component unmount
  return () => {
    // ...
  };
}, []);</code>

Dalam senario ini, pendengar acara menerima keadaan baharu, menghapuskan isu dengan data lapuk. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa fungsi pengemas kini keadaan boleh mengembalikan keadaan yang sama untuk mengelakkan kemas kini yang tidak diperlukan. Gunakan console.log dalam fungsi pengemas kini keadaan untuk melihat perubahan keadaan.

Penyelesaian Lain

Cara alternatif untuk menangani isu ini termasuk:

• Mutable Nyatakan: Menggunakan useRef dan bukannya useState.
• Pendaftaran Semula Pendengar Acara Manual: Mendaftar semula pendengar acara setiap kali keadaan berubah.
• Pengendalian Acara Terbina dalam: Menggunakan pengendalian acara terbina dalam React dan bukannya pendengar acara tersuai.

Atas ialah kandungan terperinci Apabila Menggunakan React Hooks dan Pendengar Acara, Mengapa Log Konsol Negeri Memaparkan Maklumat yang Tidak Betul?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!