Mengapakah saya mendapat ralat 'Invalid React Child' semasa memetakan tatasusunan dalam kaedah `render` saya?

Ralat Reaksi: Kanak-kanak Reaksi Tidak Sah

Ralat ini berlaku apabila kaedah pemaparan cuba untuk menjadikan kanak-kanak Reaksi tidak sah, yang boleh berlaku apabila mengembalikan tatasusunan atau objek dan bukannya elemen React yang sah.

Dalam kes anda, ralat disebabkan oleh merujuk kaedah terikat this.onItemClick.bind(this, item) terus dalam fungsi peta. Untuk membetulkannya, anda harus menggunakan fungsi anak panah sebaliknya:

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

    // ...
}</code>

Fungsi anak panah mencipta skop baharu di mana nilai ini terikat pada contoh komponen, membolehkan anda mengakses fungsi onItemClick.

Memahami Mesej Ralat

Mesej ralat termasuk maklumat berikut:

• Objek tidak sah sebagai anak React: Menunjukkan bahawa anak yang tidak sah ialah objek.
• dispatchConfig, dispatchMarker, nativeEvent, ...: Menyenaraikan sifat objek acara, yang dihantar sebagai argumen pertama kepada pengendali onClick.
• Semak kaedah pemaparan Selamat Datang: Tuding kepada komponen yang ralat berlaku (dengan mengandaikan komponen itu dinamakan "Selamat Datang").

Nota Tambahan

• Fungsi Anak Panah Mengikat: Fungsi anak panah tidak mempunyai pengikatan ini sendiri, jadi ia secara automatik terikat pada skop di mana ia ditakrifkan.
• Keadaan Kemas Kini: Anda masih boleh mengemas kini keadaan komponen dalam fungsi anak panah dengan menggunakan kaedah setState dengan fungsi panggil balik:

<code class="javascript">onClick={(e) => this.setState((prevState) => ({ lang: item }))}</code>

Atas ialah kandungan terperinci Mengapakah saya mendapat ralat 'Invalid React Child' semasa memetakan tatasusunan dalam kaedah `render` saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!