Wie zeige ich ein Array von Objekten in React an?

So zeigen Sie ein Array von Objekten in React an

In React erfordert die Anzeige eines Arrays von Objekten einen Zuordnungsprozess, um das Array in sichtbare Elemente umzuwandeln.

Arrays gerenderten Elementen zuordnen

Um ein Array von Objekten zu rendern, können Sie die Funktion .map() verwenden. Diese Funktion benötigt eine Rückruffunktion, die einzelne Array-Elemente als Eingabe akzeptiert.

Option 1: Zugeordnete Elemente in einer Variablen speichern

<code class="javascript">render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    const listItems = data.map((d) => <li key={d.name}>{d.name}</li>);

    return (
      <div>
      {listItems }
      </div>
    );
  }</code>

Hier wird die Variable listItems gespeichert die zugeordneten Elemente, die dann innerhalb eines

gerendert werden.

Option 2: Direkte Zuordnung in der Rückgabe

Alternativ können Sie auf die Notwendigkeit eines verzichten Zwischenvariable:

<code class="javascript">render() {
    const data =[{"name":"test1"},{"name":"test2"}];
    return (
      <div>
      {data.map(function(d, idx){
         return (<li key={idx}>{d.name}</li>)
       })}
      </div>
    );
  }</code>

In dieser Variante wird die Mapping-Funktion direkt innerhalb der Return-Anweisung aufgerufen.

Schlüssel für eindeutige Bezeichner

Wann Beim Rendern von Arrays ist es wichtig, für jedes Element eindeutige Schlüssel bereitzustellen. Bei beiden Optionen wird jedem gerenderten Element ein Schlüssel hinzugefügt, um die Renderleistung zu optimieren und effiziente Aktualisierungen zu ermöglichen.

Das obige ist der detaillierte Inhalt vonWie zeige ich ein Array von Objekten in React an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Array for map function this display transform input

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn