Wenn Sie eine Liste rendern, braucht React eine Möglichkeit zu wissen, welches Element welches zwischen den Renders ist, damit es DOM-Knoten korrekt wiederverwenden, neu ordnen, einfügen oder löschen kann. Der key ist diese Identität.
{users.map(user => (
<Row key={user.id} user= />
))}
Den Index als Schlüssel zu verwenden, teilt React mit, dass "das Element an Position 0 dasselbe Element wie zuvor ist" – was sofort bricht, wenn die Liste neu geordnet wird oder Sie von vorne einfügen/löschen:
// 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.
Ein echtes Symptom: eine Liste von Eingaben, bei der das Tippen in einer Zeile nach dem Löschen/Sortieren zu einer anderen Zeile "springt", weil React das falsche <input> (und seinen internen Wert/Fokus) wiederverwendet hat.
user.id, ein Slug).Schlüssel sind ein Hinweis für den Reconciliation-Algorithmus; wenn Sie sie richtig setzen, bleibt sowohl die Performance als auch der Komponentenzustand korrekt.