Kaip susieti įdėtą masyvą „React“ komponente

Dauguma šiuolaikinių programų naudoja išorinius duomenis iš kitų programų ir įrankių per API. Tai duomenys pateikiami visų tipų schemose, ir jūs turite juos dekonstruoti, kol gausite tai, ko norite naudoti. Tarp šių schemų yra duomenų objektai, kuriuose yra įdėtųjų masyvų. Gali būti sudėtinga pateikti tokio tipo duomenis. Šiame straipsnyje sužinosite, kaip susieti įdėtą masyvą React komponente.

Žemėlapio funkcijos naudojimas

Žemėlapio funkcija apjungia tam tikro masyvo elementus ir kiekvienam pateikia nurodytą teiginį arba kodą.

Plokščiame masyve žemėlapio funkcija veikia taip:

const arr = ['a', 'b', 'c'];
konst rezultatas1 = arr.map (element => {
grąžinti elementas;
});

Programoje „React“ turite apvilkti žemėlapio funkciją lenktais skliaustais ir naudoti an rodyklės funkcija kad kiekvienai iteracijai būtų grąžintas mazgo elementas. Elementai, esantys aukščiau esančiame plokščiame masyve, gali būti pateikti kaip JSX elementai, pavyzdžiui:

const arr = ['a', 'b', 'c']; 
funkcijaProgramėlė () {
grąžinti (
<>
 {arr.map((elementas, indeksas) => {
<span raktas={index}>{a}</span>
 })}
</>
	)
}

Atminkite, kad kiekvienam elementui, kurį grąžina žemėlapio funkcija, priskiriate raktą. Tai padeda „React“ nustatyti pakeistus arba pašalintus elementus. Tai svarbu susitaikymo procese.

Atvaizdavimas per įdėtą masyvą reakcijos komponente

Įdėtas masyvas yra panašus į masyvą, kuriame yra kitas masyvas. Pavyzdžiui, šiame receptų masyve yra objektas su masyvu.

konst receptai = [
 {
 ID: 716429,
 pavadinimas: "Makaronai su česnakais, laiškiniais svogūnais, žiediniais kopūstais & Duonos trupiniai",
 vaizdas: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
 patiekalų tipai: [
"pietūs",
"Pagrindinis patiekalas",
"Pagrindinis patiekalas",
"vakarienė"
 ],
 receptas: {
// recepto duomenys
 }
 }
]

Norėdami gauti tokius duomenis su įdėtais masyvais, kiekvienam masyvui turėtumėte naudoti žemėlapio funkciją.

Šiame pavyzdyje duomenų masyvą sudarytumėte taip, kaip parodyta toliau:

eksportuotinumatytasfunkcijaReceptai() {
grąžinti (
<div>
 {receptai.žemėlapis((receptas) => {
 grąžinti <div raktas={receptas.id}>
<h1>{receptas.title}</h1>
<img src={receptas.image} alt="recepto vaizdas" />
 {receptas.dishTypes.map((tipas, indeksas) => {
 grąžinti <span raktas={index}>{type}</span>
 })}
</div>
 })}
</div>
 )
}

Komponentas Receptai parodys div elementas, kuriame yra kiekvieno recepto recepto duomenys receptų masyve.

Darbas su masyvais „JavaScript“.

„JavaScript“ siūlo daugybę masyvo metodų, kurie palengvina darbą su masyvais. Šiame straipsnyje parodyta, kaip pateikti duomenis iš įdėto masyvo naudojant žemėlapių masyvo metodą. Be žemėlapio, taip pat yra būdų, padedančių perkelti duomenis į masyvą, sujungti du masyvus ar net rūšiuoti masyvą.