Kuidas kaardistada pesastatud massiivi reageerimiskomponendis

Enamik kaasaegseid rakendusi tarbivad API-de kaudu teiste rakenduste ja tööriistade välisandmeid. See andmed on saadaval igat tüüpi skeemides ja teie ülesanne on need dekonstrueerida, kuni saate soovitud tulemuse kasutada. Nende skeemide hulgas on andmeobjekte, mis sisaldavad pesastatud massiive. Seda tüüpi andmete esitamine võib olla keeruline. See artikkel õpetab teile, kuidas kaardistada komponendis React pesastatud massiiv.

Kaardifunktsiooni kasutamine

Kaardifunktsioon loob tsükli antud massiivi üksustele ja tagastab igaühe jaoks määratud lause või koodi.

Tasapinnalise massiivi korral töötab kaardifunktsioon järgmiselt:

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

Reactis peate kaardifunktsiooni ümbritsema lokkis sulgudega ja kasutama an noole funktsioon sõlme elemendi tagastamiseks iga iteratsiooni jaoks. Ülaltoodud lamedas massiivi üksused saab renderdada JSX-elementidena järgmiselt:

const arr = ['a', 'b', 'c']; 
funktsiooniRakendus () {
tagasi (
<>
 {arr.map((üksus, register) => {
<span võti={index}>{a}</span>
 })}
</>
	)
}

Pange tähele, et määrate igale kaardifunktsiooni tagastatavale elemendile võtme. See aitab Reatil tuvastada muudetud või eemaldatud üksused. See on lepitusprotsessi ajal oluline.

Pesastatud massiivi kaardistamine reageerimiskomponendis

Pesastatud massiiv sarnaneb massiiviga, mis sisaldab teist massiivi. Näiteks sisaldab järgmine retseptimassiivi massiiviga objekti.

konst retseptid = [
 {
 id: 716429,
 pealkiri: "Pasta küüslaugu, talisibula, lillkapsaga & Riivsai",
 pilt: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
 nõude tüübid: [
"lõunasöök",
"põhiroog",
"pearoog",
"õhtusöök"
 ],
 retsept: {
// retsepti andmed
 }
 }
]

Selliste andmete puhul pesastatud massiividega peaksite kasutama iga massiivi jaoks kaardifunktsiooni.

Selles näites kaardistaksite andmemassiivi järgmiselt:

eksportidavaikimisifunktsiooniRetseptid() {
tagasi (
<div>
 {retseptid.kaart((retsept) => {
 tagasi <div võti={retsept.id}>
<h1>{retsept.title}</h1>
<img src={retsept.pilt} alt="retsepti pilt" />
 {retsept.dishTypes.map((tüüp, indeks) => {
 tagasi <span võti={index}>{tüüp}</span>
 })}
</div>
 })}
</div>
 )
}

Komponent Retseptid renderdab div element, mis sisaldab iga retseptide massiivi retsepti andmeid.

Massiividega töötamine JavaScriptis

JavaScript pakub laia valikut massiivimeetodeid, mis muudavad massiividega töötamise lihtsamaks. See artikkel demonstreeris, kuidas renderdada andmeid pesastatud massiivist, kasutades kaardimassiivi meetodit. Lisaks kaardile on ka meetodeid, mis aitavad teil andmeid massiivi edastada, kaks massiivi ühendada või isegi massiivi sortida.