Kako preslikati ugniježđeni niz u komponenti React

Većina modernih aplikacija koristi vanjske podatke iz drugih aplikacija i alata putem API-ja. Ovaj podaci dolaze u svim vrstama shema, a na vama je da ih dekonstruirate dok ne dobijete ono što želite koristiti. Među tim shemama su podatkovni objekti koji sadrže ugniježđene nizove. Može biti izazovno prikazati ovu vrstu podataka. Ovaj članak će vas naučiti kako preslikati ugniježđeni niz u komponenti React.

Korištenje funkcije karte

Funkcija karte prolazi kroz petlju preko stavki zadanog niza i vraća navedenu izjavu ili kod za svaku.

Za ravni niz, funkcija karte radi na sljedeći način:

const arr = ['a', 'b', 'c'];
konst rezultat1 = arr.map (element => {
povratak element;
});

U Reactu morate staviti funkciju karte u vitičaste zagrade i koristiti an

const arr = ['a', 'b', 'c']; 
funkcijaaplikacija () {
povratak (
<>
 {arr.map((stavka, indeks) => {
<span key={index}>{a}</span>
 })}
</>
	)
}

Imajte na umu da dodjeljujete ključ svakom elementu koji funkcija karte vraća. To pomaže Reactu identificirati stavke koje su promijenjene ili uklonjene. Ovo je važno tijekom procesa pomirenja.

Mapiranje preko ugniježđenog niza u React komponenti

Ugniježđeni niz sličan je nizu koji sadrži drugi niz. Na primjer, sljedeće polje recepata sadrži objekt s poljem.

konst recepti = [
 {
 ID: 716429,
 titula: "Tjestenina s češnjakom, mladim lukom, cvjetačom & Krušne mrvice",
 slika: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
 vrste jela: [
"ručak",
"glavno jelo",
"glavno jelo",
"večera"
 ],
 recept: {
// podaci o receptu
 }
 }
]

Za podatke poput ovog s ugniježđenim nizovima, trebali biste koristiti funkciju mapiranja za svaki niz.

U ovom primjeru mapirali biste niz podataka kao što je prikazano u nastavku:

izvozzadanofunkcijaRecepti() {
povratak (
<div>
 {recepti.map((recept) => {
 povratak <div ključ={recept.id}>
<h1>{recept.naslov}</h1>
<img src={recept.slika} alt="slika recepta" />
 {recipe.dishTypes.map((tip, indeks) => {
 povratak <span key={index}>{tip}</span>
 })}
</div>
 })}
</div>
 )
}

Komponenta Recepti će prikazati div element koji sadrži podatke o receptu za svaki recept u nizu recepata.

Rad s nizovima u JavaScriptu

JavaScript nudi široku paletu metoda nizova koje čine rad s nizovima jednostavnijim. Ovaj je članak pokazao kako prikazati podatke iz ugniježđenog niza pomoću metode mapiranja. Osim karte, postoje i metode koje vam pomažu da podatke gurnete u niz, spojite dva niza ili čak sortirate niz.