Listen von Daten in React Rendern

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.

Sehen wir uns ein Beispiel an, um zu veranschaulichen, 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 sehen wir die Verwendung der Methode map(). Sie ermöglicht es, jedes Element im Array zu durchlaufen, dessen Wert zu extrahieren und spezifisches Markup basierend auf den Daten jedes Elements zu generieren.

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

Key

Der Key ist eine wichtige 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 oder neu erstellt werden müssen, anstatt die gesamte Sammlung neu zu erstellen. Durch die Verwendung von Keys wird das unnötige Neuerstellen von Elementen vermieden, was zu einer verbesserten Performance führt.

Es wird häufig 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 mithilfe der Key-Props für die Elemente korrigieren:

// 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.