Kā kartēt ligzdotu masīvu reakcijas komponentā

Lielākā daļa mūsdienu lietojumprogrammu patērē ārējos datus no citām lietojumprogrammām un rīkiem, izmantojot API. Šis dati ir pieejami visu veidu shēmās, un jums ir jādekonstruē tie, līdz iegūstat to, ko vēlaties izmantot. Starp šīm shēmām ir datu objekti, kas satur ligzdotus masīvus. Šāda veida datu renderēšana var būt sarežģīta. Šis raksts iemācīs, kā kartēt ligzdotu masīvu React komponentā.

Kartes funkcijas izmantošana

Kartes funkcija veic cilpas pār dotā masīva vienumiem un katram atgriež norādīto paziņojumu vai kodu.

Plakanam masīvam kartes funkcija darbojas šādi:

const arr = ['a', 'b', 'c'];
konst rezultāts1 = arr.map (element => {
atgriezties elements;
});

Programmā React kartes funkcija ir jāiekļauj krokainajās iekavās un jāizmanto an

const arr = ['a', 'b', 'c']; 
funkcijuApp () {
atgriezties (
<>
 {arr.map((prece, index) => {
<span atslēga={index}>{a}</span>
 })}
</>
	)
}

Ņemiet vērā, ka katram elementam, ko atgriež kartes funkcija, jūs piešķirat atslēgu. Tas palīdz React identificēt vienumus, kas ir mainīti vai noņemti. Tas ir svarīgi izlīguma procesā.

Kartēšana pār ligzdotu masīvu reakcijas komponentā

Ligzdots masīvs ir līdzīgs masīvam, kurā ir cits masīvs. Piemēram, šajā recepšu masīvā ir objekts ar masīvu.

konst receptes = [
 {
 id: 716429,
 virsraksts: "Makaroni ar ķiplokiem, lociņiem, ziedkāpostiem & Maizes drupačas",
 attēls: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
 trauku veidi: [
"pusdienas",
"pamatēdiens",
"galvenais ēdiens",
"vakariņas"
 ],
 recepte: {
// receptes dati
 }
 }
]

Lai iegūtu šādus datus ar ligzdotiem masīviem, katram masīvam ir jāizmanto kartes funkcija.

Šajā piemērā datu masīvs jākartē, kā parādīts tālāk:

eksportētnoklusējumafunkcijuReceptes() {
atgriezties (
<div>
 {receptes.map((recepte) => {
 atgriezties <div atslēga={recepte.id}>
<h1>{recepte.title}</h1>
<img src={recepte.image} alt="receptes attēls" />
 {recipe.dishTypes.map((tips, indekss) => {
 atgriezties <span atslēga={index}>{tips}</span>
 })}
</div>
 })}
</div>
 )
}

Komponents Receptes atveidos div elements, kas satur recepšu datus katrai receptei recepšu masīvā.

Darbs ar masīviem JavaScript

JavaScript piedāvā plašu masīvu metožu klāstu, kas atvieglo darbu ar masīviem. Šajā rakstā tika parādīts, kā renderēt datus no ligzdotā masīva, izmantojot kartes masīva metodi. Papildus kartei ir arī metodes, kas palīdz nosūtīt datus masīvā, savienot divus masīvus vai pat kārtot masīvu.