Bralci, kot ste vi, pomagajo podpirati MUO. Ko opravite nakup prek povezav na našem spletnem mestu, lahko zaslužimo partnersko provizijo.
Naučite se razrešiti ugnezdeni matrični objekt s funkcijo zemljevida JavaScript.
Večina sodobnih aplikacij porablja zunanje podatke iz drugih aplikacij in orodij prek API-jev. to podatki prihajajo v vseh vrstah shem in na vas je, da jih dekonstruirate, dokler ne dobite, kar želite uporaba. Med temi shemami so podatkovni objekti, ki vsebujejo ugnezdene nize. Upodabljanje te vrste podatkov je lahko zahtevno. Ta članek vas bo naučil, kako preslikati ugnezdeno matriko v komponenti React.
Uporaba funkcije zemljevida
Funkcija zemljevida preleti elemente dane matrike in vrne podani stavek ali kodo za vsakega.
Za ravno polje funkcija zemljevida deluje na naslednji način:
const arr = ['a', 'b', 'c'];
konst rezultat1 = arr.map (element => {
vrnitev element;
});
V Reactu morate funkcijo zemljevida zaviti z zavitimi oklepaji in uporabiti an
funkcijo puščice za vrnitev elementa vozlišča za vsako ponovitev. Elemente v zgornjem ploščatem nizu je mogoče upodobiti kot elemente JSX, kot je ta:const arr = ['a', 'b', 'c'];
funkcijoaplikacija () {
vrnitev (
<>
{arr.map((postavka, indeks) => {
<span key={index}>{a}</span>
})}
</>
)
}
Upoštevajte, da vsakemu elementu, ki ga vrne funkcija zemljevida, dodelite ključ. To pomaga Reactu prepoznati elemente, ki so bili spremenjeni ali odstranjeni. To je pomembno med postopkom sprave.
Preslikava čez ugnezdeno matriko v komponenti React
Ugnezdena matrika je podobna matriki, ki vsebuje drugo matriko. Naslednja matrika receptov na primer vsebuje predmet z matriko.
konst recepti = [
{
id: 716429,
naslov: "Testenine s česnom, česnom, cvetačo & Krušne drobtine",
slika: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
vrste jedi: [
"kosilo",
"glavna jed",
"glavna jed",
"večerja"
],
recept: {
// podatki o receptu
}
}
]
Za podatke, kot je ta, z ugnezdenimi nizi, morate za vsako polje uporabiti funkcijo zemljevida.
V tem primeru bi preslikali podatkovno matriko, kot je prikazano spodaj:
izvozprivzetofunkcijoRecepti() {
vrnitev (
<div>
{recepti.map((recept) => {
vrnitev <div ključ={recept.id}>
<h1>{recept.naslov}</h1>
<img src={recept.slika} alt="slika recepta" />
{recipe.dishTypes.map((vrsta, indeks) => {
vrnitev <span key={index}>{type}</span>
})}
</div>
})}
</div>
)
}
Komponenta Recepti bo upodobila div element, ki vsebuje podatke o receptih za vsak recept v matriki receptov.
Delo z nizi v JavaScriptu
JavaScript ponuja široko paleto matričnih metod, ki olajšajo delo z matrikami. Ta članek je pokazal, kako upodobiti podatke iz ugnezdene matrike z uporabo metode matrike zemljevida. Poleg zemljevida obstajajo tudi metode, ki vam pomagajo potisniti podatke v matriko, združiti dve matriki ali celo razvrstiti matriko.