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

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!