v19.2Latest

Listen rendern

Oft möchten Sie mehrere ähnliche Komponenten aus einer Datensammlung anzeigen. Sie können dieJavaScript-Array-Methodenverwenden, um ein Datenarray zu manipulieren. Auf dieser Seite verwenden Siefilter()undmap()mit React, um Ihr Datenarray zu filtern und in ein Array von Komponenten umzuwandeln.

Sie lernen
  • Wie Sie Komponenten aus einem Array mit JavaScriptsmap()
  • Wie Sie nur bestimmte Komponenten mit JavaScriptsfilter()
  • Wann und warum Sie React-Keys verwenden sollten

Daten aus Arrays rendern

Angenommen, Sie haben eine Liste von Inhalten.

Der einzige Unterschied zwischen diesen Listeneinträgen ist ihr Inhalt, ihre Daten. Beim Erstellen von Benutzeroberflächen müssen Sie oft mehrere Instanzen derselben Komponente mit unterschiedlichen Daten anzeigen: von Kommentarlisten bis hin zu Galerien von Profilbildern. In solchen Fällen können Sie diese Daten in JavaScript-Objekten und Arrays speichern und Methoden wiemap()undfilter()verwenden, um Listen von Komponenten daraus zu rendern.

Hier ist ein kurzes Beispiel, wie Sie eine Liste von Elementen aus einem Array generieren:

  1. VerschiebenSie die Daten in ein Array:
  1. MappenSie diepeople-Elemente in ein neues Array von JSX-Knoten,listItems:
  1. GebenlistItemsaus Ihrer Komponente zurück, eingewickelt in ein<ul>:

Hier ist das Ergebnis:

Beachten Sie, dass der obige Sandkasten einen Konsolenfehler anzeigt:

Konsole

Warnung: Jedes Kind in einer Liste sollte eine eindeutige „key“-Prop haben.

Sie lernen später auf dieser Seite, wie Sie diesen Fehler beheben. Bevor wir dazu kommen, strukturieren wir Ihre Daten etwas.

Arrays von Elementen filtern

Diese Daten können noch strukturierter sein.

Angenommen, Sie möchten nur Personen anzeigen, deren Beruf'chemist'ist. Sie können die JavaScript-Methodefilter()verwenden, um genau diese Personen zurückzugeben. Diese Methode nimmt ein Array von Elementen, führt sie durch einen „Test“ (eine Funktion, dietrueoderfalsezurückgibt) und gibt ein neues Array nur mit den Elementen zurück, die den Test bestanden haben (dietruezurückgegeben haben).

Sie möchten nur die Elemente, bei denenprofessiongleich'chemist'ist. Die „Test“-Funktion dafür sieht so aus:(person) => person.profession === 'chemist'. So setzen Sie es zusammen:

  1. Erstelleein neues Array nur mit den "Chemiker"-Personen,chemists, indem dufilter()aufpeopleaufrufst und nachperson.profession === 'chemist'filterst:
  1. Jetztmappeüberchemists:
  1. Schließlich,gibdielistItemsaus deiner Komponente zurück:
Fallstrick

Pfeilfunktionen geben den Ausdruck direkt nach=>implizit zurück, daher benötigst du keinereturn-Anweisung:

Wenn jedochauf dein=> eine {geschweifte Klammer folgt,musst dureturn explizit schreiben!

Pfeilfunktionen, die=> {enthalten, haben einen sogenannten"Blockkörper".Sie ermöglichen es, mehr als eine Codezeile zu schreiben, aber dumussteinereturn-Anweisung selbst schreiben. Wenn du sie vergisst, wird nichts zurückgegeben!

Listenelemente mitkey in Reihenfolge halten

Beachte, dass alle obigen Sandboxen einen Fehler in der Konsole anzeigen:

Konsole

Warnung: Jedes Kind in einer Liste sollte eine eindeutige "key"-Prop haben.

Du musst jedem Array-Element einenkeygeben – einen String oder eine Zahl, der/die es eindeutig unter den anderen Elementen in diesem Array identifiziert:

Hinweis

JSX-Elemente direkt innerhalb einesmap()-Aufrufs benötigen immer Keys!

Keys teilen React mit, welchem Array-Element jede Komponente entspricht, damit es sie später zuordnen kann. Dies wird wichtig, wenn sich deine Array-Elemente bewegen können (z.B. durch Sortieren), eingefügt oder gelöscht werden. Ein gut gewählterkeyhilft React zu erkennen, was genau passiert ist, und die korrekten Aktualisierungen am DOM-Baum vorzunehmen.

Anstatt Keys spontan zu generieren, solltest du sie in deinen Daten enthalten:

Deep Dive
Mehrere DOM-Knoten für jedes Listenelement anzeigen

Woher Sie Ihrenbekommenkey

Verschiedene Datenquellen bieten verschiedene Quellen für Schlüssel:

  • Daten aus einer Datenbank:Wenn Ihre Daten aus einer Datenbank stammen, können Sie die Datenbankschlüssel/IDs verwenden, die von Natur aus eindeutig sind.
  • Lokal generierte Daten:Wenn Ihre Daten lokal generiert und gespeichert werden (z. B. Notizen in einer Notiz-App), verwenden Sie einen aufsteigenden Zähler,crypto.randomUUID()oder ein Paket wieuuidbeim Erstellen von Elementen.

Regeln für Schlüssel

  • Schlüssel müssen unter Geschwistern eindeutig sein.Es ist jedoch in Ordnung, dieselben Schlüssel für JSX-Knoten inverschiedenenArrays zu verwenden.
  • Schlüssel dürfen sich nicht ändern, sonst verlieren sie ihren Zweck! Generieren Sie sie nicht während des Renderns.

Warum benötigt React Schlüssel?

Stellen Sie sich vor, die Dateien auf Ihrem Desktop hätten keine Namen. Stattdessen würden Sie sie nach ihrer Reihenfolge bezeichnen – die erste Datei, die zweite Datei und so weiter. Man könnte sich daran gewöhnen, aber sobald Sie eine Datei löschen, würde es verwirrend werden. Die zweite Datei würde zur ersten Datei, die dritte Datei zur zweiten und so weiter.

Dateinamen in einem Ordner und JSX-Schlüssel in einem Array erfüllen einen ähnlichen Zweck. Sie ermöglichen es uns, ein Element eindeutig unter seinen Geschwistern zu identifizieren. Ein gut gewählter Schlüssel liefert mehr Informationen als die Position innerhalb des Arrays. Selbst wenn sich diePositiondurch eine Neuordnung ändert, ermöglicht derkeyReact, das Element während seiner gesamten Lebensdauer zu identifizieren.

Fallstrick

Sie könnten versucht sein, den Index eines Elements im Array als seinen Schlüssel zu verwenden. Tatsächlich ist das genau das, was React verwendet, wenn Sie keinenkeyangeben. Aber die Reihenfolge, in der Sie Elemente rendern, ändert sich im Laufe der Zeit, wenn ein Element eingefügt, gelöscht oder das Array neu geordnet wird. Ein Index als Schlüssel führt oft zu subtilen und verwirrenden Fehlern.

Ebenso sollten Sie Schlüssel nicht spontan generieren, z. B. mitkey={Math.random()}. Dies führt dazu, dass Schlüssel zwischen den Render-Vorgängen nie übereinstimmen, was dazu führt, dass alle Ihre Komponenten und DOM-Elemente jedes Mal neu erstellt werden. Das ist nicht nur langsam, sondern führt auch zum Verlust jeglicher Benutzereingaben innerhalb der Listenelemente. Verwenden Sie stattdessen eine stabile ID, die auf den Daten basiert.

Beachten Sie, dass Ihre Komponentenkeynicht als Prop erhalten. Es wird nur als Hinweis von React selbst verwendet. Wenn Ihre Komponente eine ID benötigt, müssen Sie sie als separate Prop übergeben:<Profile key={id} userId={id} />.

Zusammenfassung

Auf dieser Seite haben Sie gelernt:

  • Wie man Daten aus Komponenten heraus in Datenstrukturen wie Arrays und Objekte verschiebt.
  • Wie man mit JavaScriptsmap()Gruppen ähnlicher Komponenten erzeugt.
  • Wie man Arrays gefilterter Elemente mit JavaScriptsfilter()erstellt.
  • Warum und wie man für jede Komponente in einer Sammlung einenkeysetzt, damit React sie auch bei Änderungen ihrer Position oder Daten im Auge behalten kann.

Try out some challenges

Challenge 1 of 4:Splitting a list in two #

This example shows a list of all people.

Change it to show two separate lists one after another: Chemists and Everyone Else. Like previously, you can determine whether a person is a chemist by checking if person.profession === 'chemist'.

上一篇Bedingtes Rendering下一篇Komponenten rein halten