Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision.
Erfahren Sie, wie Sie ein verschachteltes Array-Objekt mit der Map-Funktion von JavaScript auflösen.
Die meisten modernen Anwendungen nutzen externe Daten von anderen Anwendungen und Tools über APIs. Das Daten gibt es in allen Arten von Schemata, und es liegt an Ihnen, sie zu dekonstruieren, bis Sie das bekommen, was Sie wollen verwenden. Zu diesen Schemas gehören Datenobjekte, die verschachtelte Arrays enthalten. Es kann schwierig sein, diese Art von Daten zu rendern. In diesem Artikel erfahren Sie, wie Sie ein verschachteltes Array in einer React-Komponente mappen.
Verwenden der Kartenfunktion
Die map-Funktion durchläuft die Elemente eines gegebenen Arrays und gibt die angegebene Anweisung oder den Code für jedes zurück.
Für ein flaches Array funktioniert die map-Funktion wie folgt:
const arr = ['A', 'B', 'C'];
konst result1 = arr.map (element => {
zurückkehren Element;
});
In React müssen Sie die Map-Funktion mit geschweiften Klammern umschließen und ein verwenden Pfeilfunktion um ein Knotenelement für jede Iteration zurückzugeben. Die Elemente im obigen flachen Array können wie folgt als JSX-Elemente gerendert werden:
const arr = ['A', 'B', 'C'];
FunktionApp () {
zurückkehren (
<>
{arr.map((Element, Index) => {
<span key={index}>{A}</span>
})}
</>
)
}
Beachten Sie, dass Sie jedem Element, das die Kartenfunktion zurückgibt, einen Schlüssel zuweisen. Dies hilft React, Elemente zu identifizieren, die geändert oder entfernt wurden. Dies ist während des Versöhnungsprozesses wichtig.
Mapping über ein verschachteltes Array in einer React-Komponente
Ein verschachteltes Array ähnelt einem Array, das ein anderes Array enthält. Das folgende Rezeptarray enthält beispielsweise ein Objekt mit einem Array.
konst Rezepte = [
{
ID: 716429,
Titel: "Nudeln mit Knoblauch, Frühlingszwiebeln, Blumenkohl & Semmelbrösel",
Bild: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
GerichtArten: [
"Mittagessen",
"Hauptkurs",
"Hauptgericht",
"Abendessen"
],
Rezept: {
// Rezeptdaten
}
}
]
Für solche Daten mit verschachtelten Arrays sollten Sie für jedes Array eine map-Funktion verwenden.
In diesem Beispiel würden Sie das Datenarray wie unten gezeigt zuordnen:
ExportStandardFunktionRezepte() {
zurückkehren (
<div>
{Rezepte.map((Rezept) => {
zurückkehren <div key={rezept.id}>
<h1>{Rezept.Titel}</h1>
<img src={Rezept.Bild} alt="Rezeptbild" />
{recipe.dishTypes.map((Typ, Index) => {
zurückkehren <span key={index}>{Typ}</span>
})}
</div>
})}
</div>
)
}
Die Recipes-Komponente rendert die div -Element, das die Rezeptdaten für jedes Rezept im Rezeptarray enthält.
Arbeiten mit Arrays in JavaScript
JavaScript bietet eine Vielzahl von Array-Methoden, die das Arbeiten mit Arrays vereinfachen. In diesem Artikel wurde gezeigt, wie Daten aus einem verschachtelten Array mithilfe einer Map-Array-Methode gerendert werden. Abgesehen von map gibt es auch Methoden, die Ihnen dabei helfen, Daten in ein Array zu verschieben, zwei Arrays zu verketten oder sogar ein Array zu sortieren.
