Start·Fehlermeldungen

react · JavaScript

Die Meldung

Each child in a list should have a unique "key" prop.

Was es bedeutet

Als Liste gerenderte Geschwisterelemente haben kein key, deshalb kann React sie beim nächsten Render nicht denselben Einträgen zuordnen. Sie haben die Elemente mit items.map(...) erzeugt und key weggelassen; es ist nur eine Warnung, die Anzeige entsteht trotzdem — doch sie kehrt als stiller Fehler zurück, sobald sich die Liste ändert: Symptom ist ein Eingabewert oder eine Animation, die auf der falschen Zeile bleibt. Geben Sie eine stabile id aus Ihren Daten. Der Array-Index als key ist nur bei einer Liste sicher, deren Reihenfolge sich nie ändert und in der nichts eingefügt oder mittendrin gelöscht wird; sonst erzeugt er fast genau das Problem, gar kein key zu haben. Seit React 19 fehlt das vorangestellte Warning:.

Die Lösung

Hier hilft kein Einzeiler. Die Erklärung sagt, worauf zu schauen ist.

Ausgegeben von
react
JavaScript
15

Browser- und Node-Fehler nennen meist, was kaputtging, aber nicht, warum der Wert so wurde — Sie haben undefined gelesen, es war keine Funktion, es war kein JSON — die Stelle zum Reparieren liegt also stromaufwärts der werfenden Zeile, und nur diese Zeile mit ?. und Standardwerten stillzulegen lässt dasselbe Problem weiter entfernt und in schwerer erkennbarer Gestalt wiederkehren.

Eine Fehlermeldung lesen

  • Von der ersten Zeile abwärts lesen. Weiter unten geht es um das Innere des Werkzeugs; die Ursache steht meist oben.
  • Gibt es Datei und Zeilennummer, dort anfangen — nicht der oberste Stack-Frame, sondern die oberste Zeile, die eine eigene Datei nennt.
  • Die Meldung wörtlich suchen, vorher aber eigene Pfade und Variablennamen entfernen; genau die verhindern den Treffer.
  • Dieselbe Lage wird je Werkzeugversion anders formuliert. Passen die Treffer nicht, die Versionsnummer mit in die Suche.
  • Vor dem Einfügen einer Lösung prüfen, was sie verwirft. Manches davon lässt sich nicht zurückholen.

Häufige Fragen

Q. Was bedeutet „Each child in a list should have a unique "key" prop.“?

Als Liste gerenderte Geschwisterelemente haben kein key, deshalb kann React sie beim nächsten Render nicht denselben Einträgen zuordnen. Sie haben die Elemente mit items.map(...) erzeugt und key weggelassen; es ist nur eine Warnung, die Anzeige entsteht trotzdem — doch sie kehrt als stiller Fehler zurück, sobald sich die Liste ändert: Symptom ist ein Eingabewert oder eine Animation, die auf der falschen Zeile bleibt. Geben Sie eine stabile id aus Ihren Daten. Der Array-Index als key ist nur bei einer Liste sicher, deren Reihenfolge sich nie ändert und in der nichts eingefügt oder mittendrin gelöscht wird; sonst erzeugt er fast genau das Problem, gar kein key zu haben. Seit React 19 fehlt das vorangestellte Warning:.

Q. Wie behebe ich das?

Es gibt keinen Einzeiler. Die Erklärung oben sagt, worauf zu schauen ist.

Q. Welches Werkzeug gibt das aus?

react. Es gehört zu JavaScript, und die Meldung hat 11 Wörter.

Verwandte Fehler