Dalam fungsi render komponen saya, saya memiliki:
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>
);
}
semuanya membuat baik-baik saja, namun ketika mengklik <li>
elemen saya menerima kesalahan berikut:
Uncaught Error: Pelanggaran Invarian: Objek tidak valid sebagai anak Bereaksi (ditemukan: objek dengan kunci {dispatchConfig, dispatchMarker, nativeEvent, target, currentTarget, jenis, eventPhase, gelembung, dapat dibatalkan, timeStamp, defaultPrevented, isTrusted, view, detail, screenX , screenY, clientX, clientY, ctrlKey, shiftKey, altKey, metaKey, getModifierState, tombol, tombol, terkait Target, pageX, halamanY, isDefaultPrevented, isPropagationStopped, _dispatchListeners, _dispatchIDs}). Jika Anda bermaksud merender koleksi anak-anak, gunakan array atau bungkus objek menggunakan createFragment (objek) dari React add-ons. Periksa metode render dari
Welcome
.
Jika saya beralih ke this.onItemClick.bind(this, item)
ke (e) => onItemClick(e, item)
dalam fungsi peta semuanya berfungsi seperti yang diharapkan.
Jika seseorang dapat menjelaskan apa yang saya lakukan salah dan menjelaskan mengapa saya mendapatkan kesalahan ini, akan sangat bagus
UPDATE 1:
fungsi onItemClick adalah sebagai berikut dan menghapus this.setState mengakibatkan kesalahan menghilang.
onItemClick(e, item) {
this.setState({
lang: item,
});
}
Tetapi saya tidak dapat menghapus baris ini karena saya perlu memperbarui status komponen ini
this.onItemClick
implementasinya?