Sisäkkäisen taulukon kartoittaminen React-komponentissa

Useimmat nykyaikaiset sovellukset kuluttavat ulkoista tietoa muista sovelluksista ja työkaluista API: iden kautta. Tämä dataa tulee kaikentyyppisissä skeemoissa, ja sinun on purettava se, kunnes saat haluamasi käyttää. Näiden skeemojen joukossa on tietoobjekteja, jotka sisältävät sisäkkäisiä taulukoita. Tällaisten tietojen esittäminen voi olla haastavaa. Tämä artikkeli opettaa sinulle, kuinka kartoittaa sisäkkäinen taulukko React-komponentissa.

Karttatoiminnon käyttäminen

Karttafunktio kiertää tietyn taulukon alkioita ja palauttaa kullekin määritetyn lauseen tai koodin.

Tasaisessa taulukossa karttatoiminto toimii seuraavasti:

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

Reactissa karttatoiminto tulee kääriä hakasulkeisiin ja käyttää an nuolitoiminto palauttaaksesi solmuelementin jokaiselle iteraatiolle. Yllä olevan tasaisen taulukon kohteet voidaan hahmontaa JSX-elementteinä seuraavasti:

const arr = ['a', 'b', 'c']; 
toimintoSovellus () {
palata (
<>
 {arr.map((nimike, hakemisto) => {
<span avain={index}>{a}</span>
 })}
</>
	)
}

Huomaa, että määrität avaimen jokaiselle elementille, jonka karttafunktio palauttaa. Tämä auttaa Reactia tunnistamaan muutetut tai poistettu kohteet. Tämä on tärkeää sovitteluprosessin aikana.

Sisäkkäisen taulukon kartoitus reaktiokomponentissa

Sisäkkäinen taulukko on samanlainen kuin taulukko, joka sisältää toisen taulukon. Esimerkiksi seuraava reseptitaulukko sisältää objektin, jossa on taulukko.

konst reseptit = [
 {
 tunnus: 716429,
 otsikko: "Pasta valkosipulilla, kampasipulilla, kukkakaalilla & korppujauhoja",
 kuva: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
 astiatyypit: [
"lounas",
"pääateria",
"pääruoka",
"päivällinen"
 ],
 resepti: {
// reseptitiedot
 }
 }
]

Tällaisille sisäkkäisillä taulukoilla varustetuissa tiedoissa sinun tulee käyttää karttatoimintoa jokaiselle taulukolle.

Tässä esimerkissä kartoittaisit datataulukon alla olevan kuvan mukaisesti:

viedäoletuksenatoimintoReseptit() {
palata (
<div>
 {reseptit.kartta((resepti) => {
 palata <div avain={resepti.id}>
<h1>{resepti.nimi}</h1>
<img src={resepti.kuva} alt="reseptikuva" />
 {resepti.dishTypes.map((tyyppi, indeksi) => {
 palata <span avain={index}>{tyyppi}</span>
 })}
</div>
 })}
</div>
 )
}

Reseptit-komponentti näyttää div elementti, joka sisältää kunkin reseptitaulukon reseptitiedot.

Työskentely taulukoiden kanssa JavaScriptissä

JavaScript tarjoaa laajan valikoiman taulukkomenetelmiä, jotka tekevät taulukoiden kanssa työskentelystä yksinkertaisempaa. Tämä artikkeli osoitti, kuinka tietoja hahmonnetaan sisäkkäisestä taulukosta karttataulukkomenetelmällä. Kartan lisäksi on olemassa myös menetelmiä, joiden avulla voit siirtää tietoja taulukkoon, yhdistää kaksi taulukkoa tai jopa lajitella taulukkoa.