Sådan kortlægges et indlejret array i en React-komponent

De fleste moderne applikationer forbruger eksterne data fra andre applikationer og værktøjer gennem API'er. Det her data kommer i alle typer skemaer, og det er op til dig at dekonstruere dem, indtil du får det, du vil brug. Blandt disse skemaer er dataobjekter, der indeholder indlejrede arrays. Det kan være udfordrende at gengive denne slags data. Denne artikel vil lære dig, hvordan du kortlægger et indlejret array i en React-komponent.

Brug af kortfunktionen

Kortfunktionen går over elementerne i en given matrix og returnerer den specificerede sætning eller kode for hver.

For en flad array fungerer kortfunktionen som følger:

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

I React skal du pakke kortfunktionen ind med krøllede parenteser og bruge en pile funktion for at returnere et nodeelement for hver iteration. Elementerne i det flade array ovenfor kan gengives som JSX-elementer som dette:

const arr = ['-en', 'b', 'c']; 
fungereApp () {
Vend tilbage (
<>
 {arr.map((vare, indeks) => {
<span nøgle={indeks}>{en}</span>
 })}
</>
	)
}

Bemærk, at du tildeler en nøgle til hvert element, kortfunktionen returnerer. Dette hjælper React med at identificere elementer, der er blevet ændret eller fjernet. Dette er vigtigt under forsoningsprocessen.

Kortlægning over et indlejret array i en React-komponent

Et indlejret array ligner et array, der indeholder et andet array. For eksempel indeholder følgende receptarray et objekt med et array.

konst opskrifter = [
 {
 id: 716429,
 titel: "Pasta med hvidløg, spidskål, blomkål & Brødkrummer",
 billede: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
 skåltyper: [
"frokost",
"hovedret",
"hovedret",
"aftensmad"
 ],
 opskrift: {
// opskriftsdata
 }
 }
]

For data som denne med indlejrede arrays, bør du bruge en kortfunktion for hvert array.

I dette eksempel vil du kortlægge dataarrayet som vist nedenfor:

eksportStandardfungereOpskrifter() {
Vend tilbage (
<div>
 {recipes.map((recipe) => {
 Vend tilbage <div nøgle={opskrift.id}>
<h1>{recipe.title}</h1>
<img src={recipe.image} alt="opskriftsbillede" />
 {recipe.dishTypes.map((type, index) => {
 Vend tilbage <span nøgle={indeks}>{type}</span>
 })}
</div>
 })}
</div>
 )
}

Opskrifter-komponenten vil gengive div element, der indeholder opskriftsdataene for hver opskrift i opskriftsarrayet.

Arbejde med arrays i JavaScript

JavaScript tilbyder en bred vifte af array-metoder, der gør arbejdet med arrays lettere. Denne artikel demonstrerede, hvordan man gengiver data fra et indlejret array ved hjælp af en kort array-metode. Udover kort er der også metoder til at hjælpe dig med at skubbe data til et array, sammenkæde to arrays eller endda sortere et array.