Beim Arbeiten mit modernen Webanwendungen ist es üblich, Datensammlungen darzustellen, die vom Backend empfangen werden. Dafür verwenden wir die Methode map(). Innerhalb der Methode map() nutzen wir eine Callback-Funktion und geben JSX zurück, um die gewünschte Ausgabe zu rendern.

Schauen wir uns ein Beispiel an, um zu verdeutlichen, wie dies funktioniert. Wir haben eine App-Komponente, die die Prop toys, ein Array von Objekten, übergibt. Die Komponente ToyCard verwendet die Methode map(), um jedes Spielzeug im Array darzustellen.

// Data from backend
const toysData = [
  { id: "id-1", name: "Rainbow Sparkle Unicorn Plush" },
  { id: "id-2", name: "Jungle Adventure Playset" },
  { id: "id-3", name: "Magical Princess Castle Dollhouse" },
  { id: "id-4", name: "RoboBot Transformer Robot" },
  { id: "id-5", name: "SuperBlast Action Figure" },
];

// Child component
const ToyCard = (props) => (
  <ul>
    {props.toys.map((toy) => (
      <li>{toy.name}</li>
    ))}
  </ul>
);

// Parent component
const App = () => (
  <>
    <ToyCard toys={toysData} />
  </>
);

In den Zeilen 13-15 wird die Verwendung der map()-Methode beobachtet. Sie ermöglicht das Iterieren durch jedes Element im Array, das Extrahieren seines Wertes und das Generieren spezifischer Markup-Strukturen basierend auf den Daten jedes Elements.

Vollständiger App-Code:

Wenn wir jedoch auf die Konsole achten, stellen wir fest, dass die Warnung erscheint: Each child in a list should have a unique "key" prop..

Key

Der Key ist eine entscheidende Zeichenketten-Prop, die beim Erstellen von Elementen innerhalb einer Sammlung zugewiesen werden muss.

React verwendet Keys, um eine stabile Identität für Elemente innerhalb einer Sammlung sicherzustellen. Diese Keys ermöglichen es React, zu erkennen, welche Elemente bei Änderungen neu gerendert und erstellt werden müssen, anstatt die gesamte Sammlung neu zu erstellen. Durch die Verwendung von Keys wird eine unnötige Neuerstellung von Elementen vermieden, was zu einer verbesserten Performance führt.

Hinweis

Der Key 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 Key-Props zu verwenden. Diese Vorgehensweise ermöglicht es React, einzelne Elemente innerhalb einer Sammlung effektiv zu identifizieren und zu verwalten.

Lassen Sie uns unsere vorherige App korrigieren, indem wir die Key-Props für die Elemente verwenden:

// Data from backend
const toysData = [
  { id: "id-1", name: "Rainbow Sparkle Unicorn Plush" },
  { id: "id-2", name: "Jungle Adventure Playset" },
  { id: "id-3", name: "Magical Princess Castle Dollhouse" },
  { id: "id-4", name: "RoboBot Transformer Robot" },
  { id: "id-5", name: "SuperBlast Action Figure" },
];

// Child component
const ToyCard = (props) => (
  <ul>
    {props.toys.map((toy) => (
      <li key={toy.id}>{toy.name}</li>
    ))}
  </ul>
);

// Parent component
const App = () => (
  <>
    <ToyCard toys={toysData} />
  </>
);

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

Vollständiger App-Code: