Rumah >hujung hadapan web >tutorial js >Mengapakah saya mendapat ralat 'Pelanggaran Invarian: Objek tidak sah sebagai kanak-kanak Bertindak balas' dan bagaimana saya membetulkannya?

Mengapakah saya mendapat ralat 'Pelanggaran Invarian: Objek tidak sah sebagai kanak-kanak Bertindak balas' dan bagaimana saya membetulkannya?

DDD
DDDasal
2024-11-04 22:28:02783semak imbas

Why am I getting the

Pelanggaran Invarian: Objek sebagai React Children

Menemui ralat "Objek tidak sah sebagai React child" dalam React menunjukkan rendering yang tidak betul objek semasa kanak-kanak. Untuk menyelesaikan isu ini, pastikan semua elemen dalam kaedah pemaparan adalah nod React yang sah.

Dalam kod yang disediakan, ralat timbul kerana penggunaan tidak wajar this.onItemClick.bind(this, item) sebagai pengendali acara dalam fungsi peta. Walaupun bind biasanya digunakan untuk mengikat konteks fungsi, dalam senario ini, ia secara tidak sengaja menjadikan objek acara sebagai anak kepada elemen li.

Untuk membetulkan isu tersebut, pengendali acara harus ditulis sebagai fungsi anak panah dalam fungsi peta:

<code class="jsx">const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => {
  return (<li onClick={(e) => onItemClick(e, item)} key={item}>{item}</li>);
});</code>

Dengan merangkum pengendali acara sebagai fungsi anak panah, objek acara tidak lagi tersilap dianggap sebagai elemen kanak-kanak, menyelesaikan ralat.

Kemas kini 1: Kehadiran Kemas Kini Negeri

Dalam kod yang dikemas kini, fungsi onItemClick termasuk panggilan setState untuk mengemas kini keadaan komponen dengan item. Jika mengalih keluar baris ini menyelesaikan ralat, ini menunjukkan bahawa terdapat masalah dengan logik kemas kini keadaan. Pastikan keadaan komponen sedang dimanipulasi dengan betul dan keadaan yang dikemas kini tidak menyebabkan sebarang konflik atau isu pemaparan.

Atas ialah kandungan terperinci Mengapakah saya mendapat ralat 'Pelanggaran Invarian: Objek tidak sah sebagai kanak-kanak Bertindak balas' dan bagaimana saya membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn