Hur man kartlägger en kapslad array i en React-komponent

De flesta moderna applikationer förbrukar extern data från andra applikationer och verktyg via API: er. Detta data finns i alla typer av scheman, och det är upp till dig att dekonstruera det tills du får det du vill använda sig av. Bland dessa scheman finns dataobjekt som innehåller kapslade arrayer. Det kan vara utmanande att återge den här typen av data. Den här artikeln kommer att lära dig hur du mappar över en kapslad array i en React-komponent.

Använda kartfunktionen

Kartfunktionen går över objekten i en given array och returnerar den specificerade satsen eller koden för var och en.

För en platt array fungerar kartfunktionen enligt följande:

const arr = ['a', 'b', 'c'];
konst resultat1 = arr.map (element => {
lämna tillbaka element;
});

I React måste du slå in kartfunktionen med parenteser och använda en pilfunktion för att returnera ett nodelement för varje iteration. Objekten i den platta arrayen ovan kan renderas som JSX-element så här:

const arr = ['a', 'b', 'c']; 
fungeraApp () {
lämna tillbaka (
<>
 {arr.map((artikel, index) => {
<span key={index}>{a}</span>
 })}
</>
	)
}

Observera att du tilldelar en nyckel till varje element som kartfunktionen returnerar. Detta hjälper React att identifiera objekt som har ändrats eller tagits bort. Detta är viktigt under avstämningsprocessen.

Kartläggning över en kapslad array i en React-komponent

En kapslad array liknar en array som innehåller en annan array. Till exempel innehåller följande receptmatris ett objekt med en matris.

konst recept = [
 {
 id: 716429,
 titel: "Pasta med vitlök, salladslök, blomkål & Ströbröd",
 bild: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
 dishTypes: [
"lunch",
"huvudrätt",
"huvudrätt",
"middag"
 ],
 recept: {
// receptdata
 }
 }
]

För data som denna med kapslade arrayer bör du använda en kartfunktion för varje array.

I det här exemplet skulle du mappa över datamatrisen som visas nedan:

exporterastandardfungeraRecept() {
lämna tillbaka (
<div>
 {recipes.map((recept) => {
 lämna tillbaka <div nyckel={recept.id}>
<h1>{recipe.title}</h1>
<img src={recept.bild} alt="receptbild" />
 {recipe.dishTypes.map((typ, index) => {
 lämna tillbaka <span key={index}>{typ}</span>
 })}
</div>
 })}
</div>
 )
}

Recept-komponenten kommer att återge div element som innehåller receptdata för varje recept i receptarrayen.

Arbeta med arrayer i JavaScript

JavaScript erbjuder ett brett utbud av arraymetoder som gör det enklare att arbeta med arrayer. Den här artikeln demonstrerade hur man renderar data från en kapslad array med en kartmatrismetod. Förutom karta finns det också metoder som hjälper dig att skicka data till en array, sammanfoga två arrayer eller till och med sortera en array.