Hogyan lehet leképezni egy beágyazott tömböt egy React komponensben

A legtöbb modern alkalmazás más alkalmazások és eszközök külső adatait használja fel API-kon keresztül. Ez az adatok minden típusú sémában megtalálhatók, és Önön múlik, hogy ezeket dekonstruálja-e, amíg el nem éri, amit akar. használat. Ezen sémák között vannak beágyazott tömböket tartalmazó adatobjektumok. Az ilyen típusú adatok megjelenítése kihívást jelenthet. Ebből a cikkből megtudhatja, hogyan képezhet le egy beágyazott tömböt egy React összetevőben.

A térkép funkció használata

A leképezési függvény egy adott tömb elemei fölött hurkol, és mindegyikhez a megadott utasítást vagy kódot adja vissza.

Lapos tömb esetén a térkép funkció a következőképpen működik:

const arr = ['a', 'b', 'c'];
const eredmény1 = arr.map (elem => {
Visszatérés elem;
});

A React alkalmazásban a térképfüggvényt zárójelbe kell foglalnia, és egy nyíl funkció hogy minden iterációhoz egy csomópont elemet adjon vissza. A fenti lapos tömb elemei JSX elemként jeleníthetők meg, így:

const arr = ['a', 'b', 'c']; 
funkcióApp () {
Visszatérés (
<>
 {arr.map((elem, index) => {
<span kulcs={index}>{a}</span>
 })}
</>
	)
}

Vegye figyelembe, hogy a leképezési függvény által visszaadott minden elemhez kulcsot rendel. Ez segít a Reactnak azonosítani a módosított vagy eltávolított elemeket. Ez fontos a megbékélési folyamat során.

Beágyazott tömb leképezése egy reakciókomponensben

A beágyazott tömb hasonló egy másik tömböt tartalmazó tömbhöz. Például a következő recepttömb egy objektumot tartalmaz tömbbel.

const receptek = [
 {
 azonosító: 716429,
 cím: "Tészta fokhagymával, mogyoróhagymával, karfiollal & Zsemlemorzsa",
 kép: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
 edénytípusok: [
"ebéd",
"főétel",
"főétel",
"vacsora"
 ],
 recept: {
// receptadatok
 }
 }
]

A beágyazott tömbökhöz hasonló adatokhoz minden tömbhöz leképezési függvényt kell használnia.

Ebben a példában leképezheti az adattömböt az alábbiak szerint:

exportalapértelmezettfunkcióReceptek() {
Visszatérés (
<div>
 {receptek.map((recept) => {
 Visszatérés <div kulcs={recept.azonosító}>
<h1>{recept.title}</h1>
<img src={recipe.image} alt="recept kép" />
 {recipe.dishTypes.map((típus, index) => {
 Visszatérés <span kulcs={index}>{típus}</span>
 })}
</div>
 })}
</div>
 )
}

A Receptek komponens megjeleníti a div elem, amely a recepttömb egyes receptjeihez tartozó receptadatokat tartalmazza.

Tömbök használata JavaScriptben

A JavaScript a tömbmódszerek széles választékát kínálja, amelyek egyszerűbbé teszik a tömbökkel való munkát. Ez a cikk bemutatja, hogyan lehet adatokat előállítani egy beágyazott tömbből egy leképezési tömb módszerrel. A térképen kívül vannak olyan módszerek is, amelyek segítenek az adatok tömbbe való átküldésében, két tömb összefűzésében vagy akár egy tömb rendezésében.