Rendern eines Arrays von Objekten in React
Die Abfrage zeigt einen Versuch, eine Liste von Objekten in React zu rendern. Allerdings fehlt die notwendige Return-Anweisung innerhalb der render()-Methode. Lassen Sie uns dieses Problem angehen und eine umfassende Lösung bereitstellen:
Lösung:
Um ein Array von Objekten in React zu rendern, gibt es zwei Ansätze:
Methode 1:Speichern Sie die Ausgabe in einer Variablen
<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>Methode 2:Schreiben Sie die Kartenfunktion direkt in die Rückgabe
<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 Bei beiden Methoden werden die Daten einer Liste von Elementen zugeordnet. Jedem Element wird eine eindeutige Schlüsselstütze zugewiesen, wie von React gefordert. Dieser Schlüssel gewährleistet ein effizientes Neu-Rendering und behält die Identität jedes Listenelements bei.
Diese Lösungen bieten eine zuverlässige und flexible Möglichkeit, Arrays von Objekten in React zu rendern.
Das obige ist der detaillierte Inhalt vonWie rendere ich ein Array von Objekten in React?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
