Mengapa Saya Mendapat 'Pelanggaran Invarian: Objek tidak sah sebagai kanak-kanak React' dalam Apl My React?

Ralat Reaksi: Objek Sebagai Kanak-kanak

Dalam aplikasi React, ralat "Pelanggaran Invarian: Objek tidak sah sebagai kanak-kanak React" berlaku apabila cuba menjadikan objek sebagai anak kepada komponen. Isu ini timbul apabila kanak-kanak menjangkakan rentetan, nombor atau elemen tetapi sebaliknya menerima objek.

Dalam contoh yang diberikan, dalam fungsi peta dalam kaedah render, this.onItemClick.bind(this, item ) secara salah menghantar keseluruhan objek acara sebagai harta kepada pengendali onClick. Akibatnya, pengendali acara onClick menerima acara dengan sifatnya sebagai objek, mencetuskan ralat.

Untuk menyelesaikannya, anda boleh sama ada menggunakan fungsi anak panah di dalam peta untuk mengendalikan acara klik dan lulus hujah yang diperlukan :

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

Sebagai alternatif, jika anda ingin mengekalkan objek acara, anda boleh mengikat hanya parameter yang diperlukan:

render() {
    const items = ['EN', 'IT', 'FR', 'GR', 'RU'].map((item) => {
      return (<li onClick={this.onItemClick.bind(this, item)} key={item}>{item}</li>);
    });
    return (
      <div>
        ...
                <ul>
                  {items}
                </ul>
         ...
      </div>
    );
  }

Atas ialah kandungan terperinci Mengapa Saya Mendapat 'Pelanggaran Invarian: Objek tidak sah sebagai kanak-kanak React' dalam Apl My React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!