Čtenáři jako vy pomáhají podporovat MUO. Když provedete nákup pomocí odkazů na našich stránkách, můžeme získat provizi přidružené společnosti.
Naučte se, jak vyřešit vnořený objekt pole pomocí mapovací funkce JavaScriptu.
Většina moderních aplikací spotřebovává externí data z jiných aplikací a nástrojů prostřednictvím rozhraní API. Tento data přicházejí ve všech typech schémat a je na vás, abyste je dekonstruovali, dokud nezískáte to, co chcete použití. Mezi těmito schématy jsou datové objekty, které obsahují vnořená pole. Renderovat tento druh dat může být náročné. Tento článek vás naučí, jak mapovat přes vnořené pole v komponentě React.
Použití funkce Mapa
Funkce map prochází položky daného pole a pro každou vrací zadaný příkaz nebo kód.
U plochého pole funguje funkce mapy následovně:
const arr = ['A', 'b', 'C'];
konst vysledek1 = arr.map (prvek => {
vrátit se živel;
});
V Reactu musíte funkci mapy zabalit do složených závorek a použít an
funkce šipky vrátit prvek uzlu pro každou iteraci. Položky v plochém poli výše lze vykreslit jako prvky JSX takto:const arr = ['A', 'b', 'C'];
funkceAplikace () {
vrátit se (
<>
{arr.map((položka, index) => {
<span key={index}>{A}</span>
})}
</>
)
}
Všimněte si, že každému prvku, který funkce mapy vrátí, přiřadíte klíč. To pomáhá React identifikovat položky, které byly změněny nebo odstraněny. To je důležité během procesu usmíření.
Mapování přes vnořené pole v komponentě React
Vnořené pole je podobné poli, které obsahuje jiné pole. Například následující pole receptů obsahuje objekt s polem.
konst recepty = [
{
id: 716429,
titul: "Těstoviny s česnekem, jarní cibulkou, květákem & Strouhanka",
obraz: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
Typy jídel: [
"oběd",
"hlavní chod",
"hlavní jídlo",
"večeře"
],
recept: {
// data receptury
}
}
]
Pro data, jako je tato s vnořenými poli, byste měli pro každé pole použít funkci map.
V tomto příkladu byste mapovali datové pole, jak je znázorněno níže:
vývoznívýchozífunkceRecepty() {
vrátit se (
<div>
{recepty.mapa((recept) => {
vrátit se <div key={recipe.id}>
<h1>{recipe.title}</h1>
<img src={recipe.image} alt="obrázek receptu" />
{recipe.dishTypes.map((typ, index) => {
vrátit se <span key={index}>{typ}</span>
})}
</div>
})}
</div>
)
}
Komponenta Recepty vykreslí soubor div prvek obsahující data receptury pro každý recept v poli receptů.
Práce s poli v JavaScriptu
JavaScript nabízí širokou škálu metod polí, které usnadňují práci s poli. Tento článek demonstroval, jak vykreslit data z vnořeného pole pomocí metody mapového pole. Kromě mapy existují také metody, které vám pomohou odeslat data do pole, zřetězit dvě pole nebo dokonce pole seřadit.
