Ako mapovať vnorené pole v komponente React

Väčšina moderných aplikácií využíva externé údaje z iných aplikácií a nástrojov prostredníctvom rozhraní API. Toto údaje prichádzajú vo všetkých typoch schém a je na vás, aby ste ich dekonštruovali, kým nedosiahnete to, čo chcete použitie. Medzi týmito schémami sú dátové objekty, ktoré obsahujú vnorené polia. Vykresliť tento druh údajov môže byť náročné. Tento článok vás naučí, ako mapovať vnorené pole v komponente React.

Používanie funkcie mapy

Funkcia mapy prechádza cez položky daného poľa a vracia zadaný príkaz alebo kód pre každú z nich.

Pre ploché pole funguje funkcia mapy nasledovne:

const arr = ['a', 'b', 'c'];
konšt vysledok1 = arr.map (prvok => {
vrátiť element;
});

V React musíte zabaliť funkciu mapy do zložených zátvoriek a použiť

const arr = ['a', 'b', 'c']; 
funkciuApp () {
vrátiť (
<>
 {arr.map((položka, index) => {
<span key={index}>{a}</span>
 })}
</>
	)
}

Všimnite si, že každému prvku, ktorý funkcia mapy vráti, priradíte kľúč. To pomáha React identifikovať položky, ktoré boli zmenené alebo odstránené. Toto je dôležité počas procesu zmierovania.

Mapovanie cez vnorené pole v komponente React

Vnorené pole je podobné poľu, ktoré obsahuje ďalšie pole. Napríklad nasledujúce pole receptov obsahuje objekt s poľom.

konšt recepty = [
 {
 id: 716429,
 názov: "Cestoviny s cesnakom, cibuľkou, karfiolom & Strúhanka",
 obrázok: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
 Typy jedál: [
"obed",
"hlavný chod",
"hlavné jedlo",
"večera"
 ],
 recept: {
// údaje o recepte
 }
 }
]

Pre údaje, ako je tento s vnorenými poľami, by ste mali použiť funkciu mapy pre každé pole.

V tomto príklade by ste mapovali dátové pole, ako je uvedené nižšie:

exportpredvolenáfunkciuRecepty() {
vrátiť (
<div>
 {recepty.map((recept) => {
 vrátiť <div key={recipe.id}>
<h1>{recipe.title}</h1>
<img src={recipe.image} alt="obrázok receptu" />
 {recipe.dishTypes.map((typ, index) => {
 vrátiť <span key={index}>{type}</span>
 })}
</div>
 })}
</div>
 )
}

Komponent Recepty vykreslí súbor div prvok obsahujúci údaje receptu pre každý recept v poli receptov.

Práca s poliami v JavaScripte

JavaScript ponúka širokú škálu metód polí, ktoré zjednodušujú prácu s poliami. Tento článok ukázal, ako vykresliť údaje z vnoreného poľa pomocou metódy mapového poľa. Okrem mapy existujú aj metódy, ktoré vám pomôžu presunúť údaje do poľa, zreťaziť dve polia alebo dokonca zoradiť pole.