Apabila anda render sesuatu senarai, React memerlukan cara untuk mengetahui item mana ialah item yang mana antara render supaya ia boleh menggunakan semula, menyusun semula, menyisip, atau memadam nod DOM dengan betul. key itulah identitinya.
{users.map(user => (
<Row key={user.id} user= />
))}
Menggunakan indeks sebagai key memberitahu React "item pada kedudukan 0 ialah item yang sama seperti sebelum ini" — yang akan rosak sebaik sahaja senarai disusun semula, atau anda menyisip/membuang dari hadapan:
// items: [A, B, C] with keys 0,1,2
// you DELETE A → [B, C], keys become 0,1
// React thinks key 0 (was A) is now B, key 1 (was B) is now C...
// so it keeps the wrong DOM state with the wrong item.
Satu gejala sebenar: senarai input di mana menaip dalam satu baris "melompat" ke baris lain selepas memadam/menyusun, kerana React menggunakan semula <input> yang salah (dan nilai/fokus dalamannya).
user.id, sesuatu slug).Key ialah satu petunjuk kepada algoritma rekonsiliasi; menetapkannya dengan betul mengekalkan kedua-dua prestasi dan state komponen dengan betul.