Rendern Einer Datensammlung

Bei der Arbeit an modernen Web-Apps ist es üblich, Sammlungen von Daten zu rendern, die vom Backend empfangen werden. Um dies zu erreichen, verwenden wir die map()-Methode. Innerhalb der map()-Methode verwenden wir eine Callback-Funktion und geben JSX zurück, um die gewünschte Ausgabe zu rendern.

Nehmen wir ein Beispiel, um zu veranschaulichen, wie es funktioniert. Wir werden eine App-Komponente haben, die die Prop toys, ein Array von Objekten, übergibt. Die ToyCard-Komponente wird die map()-Methode verwenden, um jedes Spielzeug im Array zu rendern.

In den Zeilen 13-15 beobachten wir die Verwendung der map()-Methode. Sie ermöglicht es uns, durch jedes Element im Array zu iterieren, seinen Wert zu extrahieren und spezifisches Markup basierend auf den Daten jedes Elements zu generieren.

Vollständiger App-Code:

Wenn wir jedoch auf die Konsole achten, können wir feststellen, dass wir die Warnung erhalten: Each child in a list should have a unique "key" prop..

Key

Der key ist eine entscheidende String-Eigenschaft, die beim Erstellen von Elementen innerhalb einer Sammlung zugewiesen werden muss.

React verwendet Schlüssel, um eine stabile Identität für Elemente innerhalb einer Sammlung sicherzustellen. Diese Schlüssel ermöglichen es React, zu identifizieren, welche Elemente neu gerendert und neu erstellt werden müssen, wenn Änderungen auftreten, anstatt die gesamte Sammlung neu zu erstellen. Die Verwendung von Schlüsseln verhindert unnötige Neuerstellungen von Elementen, was zu einer verbesserten Leistung führt.

Hinweis

Der Schlüssel muss unter benachbarten Elementen eindeutig sein. Er sollte konstant bleiben und sich im Laufe der Zeit nicht ändern.

Es wird allgemein empfohlen, Identifikatoren wie id-Werte aus Backend-Daten als Schlüssel-Eigenschaften zu verwenden. Diese Praxis ermöglicht es React, einzelne Elemente innerhalb einer Sammlung effektiv zu identifizieren und zu verwalten.

Lassen Sie uns unsere vorherige App mit den Schlüssel-Eigenschaften für die Elemente korrigieren:

Zeile 14: Die key-Eigenschaft wird auf das Element gesetzt, das innerhalb eines Datenarrays mehrfach gerendert wird.

Vollständiger App-Code: