Förklaring

React använder key för att hålla reda på vilka element som ändrats, lagts till, eller tagits bort när en lista uppdateras. Utan key jämför React element position för position, vilket leder till onödiga omrenderingar och i värsta fall felaktig komponentdata i fel element.

Problemet är inte enbart kosmetiskt. Om listobjekt kan ändra ordning kan React visa fel data i fel element, eftersom det inte vet vilket element som är vilket. Formulärfält är ett klassiskt exempel: utan rätt key kan ett textfält behålla sin inmatning trots att listens ordning ändrats.

Varningen syns i konsolen men påverkar inte rendering direkt. Det underliggande beteendet är ändå buggpron och bör åtgärdas.

Vanliga orsaker

.map() utan key-prop på det yttersta elementet. key satt på ett inre element i stället för det yttersta. Fragment (<>) utan explicit key i mappad lista.

Lösning

Sätt key på det yttersta elementet som .map() returnerar, och använd ett stabilt unikt ID:

// Fel
{items.map(item => (
  <li>{item.name}</li>
))}

// Rätt
{items.map(item => (
  <li key={item.id}>{item.name}</li>
))}

Undvik index som key om listan kan sorteras, filtreras, eller ändra ordning. Index löser varningen men inte det underliggande problemet med felaktig komponentidentitet.