Listen rendern und die Rolle von Keys

Verwandle ein Array aus Daten mit map in eine Liste von Elementen auf dem Bildschirm und identifiziere jedes Element mit Keys.

8 Min. · 3 Fragen

Oberflächen sind voller Listen: Nachrichten in einer Unterhaltung, Produkte in einem Shop, Titel in einer Playlist... Statt Tags von Hand zu kopieren und einzufügen, startest du von einem Array aus Daten und verwandelst es mit der Methode map. Kurze Erinnerung: map wendet eine Funktion auf jedes Element eines Arrays an und gibt ein neues Array mit den Ergebnissen zurück.

const fruits = ["apple", "banana", "kiwi"];

const upperFruits = fruits.map(function (fruit) {
  return fruit.toUpperCase();
});

console.log(upperFruits);

In React machst du genau dasselbe, nur dass die an map übergebene Funktion JSX statt eines Strings zurückgibt. React kann ein Array aus JSX-Elementen anzeigen: Es rendert sie eines nach dem anderen. Die einzige Voraussetzung ist, jedem Element ein spezielles Prop namens key zu geben.

function FruitList() {
  const fruits = ["apple", "banana", "kiwi"];

  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}

Wofür ist key da? Es ist ein eindeutiges Etikett, mit dem React jedes Element wiedererkennt, wenn sich die Liste ändert (Hinzufügen, Entfernen, Umsortieren), wie die nummerierten Marken an der Garderobe: ohne Nummer gibt es keine Möglichkeit, den richtigen Mantel zurückzugeben. Dank der Keys aktualisiert React nur das, was sich tatsächlich geändert hat. In der Praxis ist der beste key ein eindeutiger, stabiler Bezeichner aus deinen Daten, etwa ein id-Feld.

const tasks = [
  { id: 1, label: "Buy groceries" },
  { id: 2, label: "Water the plants" },
];

function TaskList() {
  return (
    <ul>
      {tasks.map((task) => (
        <li key={task.id}>{task.label}</li>
      ))}
    </ul>
  );
}

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Welche Array-Methode verwendest du, um in React eine Liste zu rendern?
   • push
   • map
   • forEach
2. Wofür ist das key-Prop da?
   • Um die Liste automatisch alphabetisch zu sortieren
   • Um die Liste mit einem Passwort zu schützen
   • Damit React jedes Element der Liste identifizieren kann
3. Was ist der beste Wert für einen key?
   • Ein eindeutiger, stabiler Bezeichner aus den Daten
   • Der Index des Elements im Array, in jedem Fall
   • Eine bei jedem Render erzeugte Zufallszahl