Hvordan kartlegge en nestet matrise i en React-komponent

De fleste moderne applikasjoner bruker eksterne data fra andre applikasjoner og verktøy gjennom APIer. Dette data kommer i alle typer skjemaer, og det er opp til deg å dekonstruere dem til du får det du vil bruk. Blant disse skjemaene er dataobjekter som inneholder nestede matriser. Det kan være utfordrende å gjengi denne typen data. Denne artikkelen vil lære deg hvordan du kartlegger en nestet matrise i en React-komponent.

Bruke kartfunksjonen

Kartfunksjonen går over elementene i en gitt matrise og returnerer den spesifiserte setningen eller koden for hver.

For en flat array fungerer kartfunksjonen som følger:

const arr = ['en', 'b', 'c'];
konst resultat1 = arr.map (element => {
komme tilbake element;
});

I React må du pakke inn kartfunksjonen med krøllete parenteser og bruke en pil funksjon for å returnere et nodeelement for hver iterasjon. Elementene i den flate matrisen ovenfor kan gjengis som JSX-elementer slik:

const arr = ['en', 'b', 'c']; 
funksjonApp () {
komme tilbake (
<>
 {arr.map((element, indeks) => {
<span key={indeks}>{en}</span>
 })}
</>
	)
}

Merk at du tilordner en nøkkel til hvert element kartfunksjonen returnerer. Dette hjelper React med å identifisere elementer som har blitt endret eller fjernet. Dette er viktig under forsoningsprosessen.

Kartlegging over en nestet matrise i en React-komponent

En nestet matrise ligner på en matrise som inneholder en annen matrise. For eksempel inneholder følgende oppskriftsmatrise et objekt med en matrise.

konst oppskrifter = [
 {
 ID: 716429,
 tittel: "Pasta med hvitløk, løk, blomkål & Brødsmuler",
 bilde: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
 tallerkentyper: [
"lunsj",
"hovedrett",
"hovedrett",
"middag"
 ],
 oppskrift: {
// oppskriftsdata
 }
 }
]

For data som dette med nestede matriser, bør du bruke en kartfunksjon for hver matrise.

I dette eksemplet vil du kartlegge datamatrisen som vist nedenfor:

eksportmisligholdefunksjonOppskrifter() {
komme tilbake (
<div>
 {recipes.map((recipe) => {
 komme tilbake <div nøkkel={recipe.id}>
<h1>{recipe.title}</h1>
<img src={recipe.image} alt="oppskriftsbilde" />
 {recipe.dishTypes.map((type, index) => {
 komme tilbake <span key={indeks}>{type}</span>
 })}
</div>
 })}
</div>
 )
}

Oppskrifter-komponenten vil gjengi div element som inneholder oppskriftsdataene for hver oppskrift i oppskriftene.

Arbeide med matriser i JavaScript

JavaScript tilbyr et bredt utvalg av array-metoder som gjør arbeidet med arrays enklere. Denne artikkelen demonstrerte hvordan du gjengir data fra en nestet matrise ved hjelp av en kartmatrisemetode. Bortsett fra kart, er det også metoder for å hjelpe deg med å skyve data til en matrise, sette sammen to matriser eller til og med sortere en matrise.