Jak mapować zagnieżdżoną tablicę w komponencie React

Większość nowoczesnych aplikacji korzysta z danych zewnętrznych z innych aplikacji i narzędzi za pośrednictwem interfejsów API. Ten dane są dostępne we wszystkich typach schematów i od ciebie zależy, czy je zdekonstruujesz, dopóki nie uzyskasz tego, czego chcesz używać. Wśród tych schematów znajdują się obiekty danych zawierające zagnieżdżone tablice. Renderowanie tego rodzaju danych może być trudne. Ten artykuł nauczy Cię, jak mapować zagnieżdżoną tablicę w komponencie React.

Korzystanie z funkcji mapy

Funkcja map zapętla elementy danej tablicy i zwraca określoną instrukcję lub kod dla każdego z nich.

W przypadku płaskiej tablicy funkcja map działa w następujący sposób:

stała tablica = ['A', 'B', 'C'];
konst wynik1 = tablica.map (element => {
powrót element;
});

W React musisz otoczyć funkcję map nawiasami klamrowymi i użyć an funkcja strzałki aby zwrócić element węzła dla każdej iteracji. Elementy w powyższej płaskiej tablicy można renderować jako elementy JSX w następujący sposób:

stała tablica = ['A', 'B', 'C']; 
funkcjonowaćAplikacja () {
powrót (
<>
 {arr.map((pozycja, indeks) => {
<klucz rozpiętości={indeks}>{A}</span>
 })}
</>
	)
}

Zauważ, że przypisujesz klucz do każdego elementu zwracanego przez funkcję map. Pomaga to React zidentyfikować elementy, które zostały zmienione lub usunięte. Jest to ważne podczas procesu pojednania.

Mapowanie zagnieżdżonej tablicy w komponencie React

Tablica zagnieżdżona jest podobna do tablicy zawierającej inną tablicę. Na przykład poniższa tablica receptury zawiera obiekt z tablicą.

konst przepisy = [
 {
 id: 716429,
 tytuł: "Makaron Z Czosnkiem, Szczypiorek, Kalafior & Bułka tarta",
 obraz: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
 Typy potraw: [
"obiad",
"danie główne",
"główne danie",
"kolacja"
 ],
 przepis: {
// dane receptury
 }
 }
]

W przypadku takich danych z zagnieżdżonymi tablicami należy użyć funkcji mapowania dla każdej tablicy.

W tym przykładzie zmapowałbyś tablicę danych, jak pokazano poniżej:

eksportdomyślnyfunkcjonowaćPrzepisy() {
powrót (
<dz>
 {przepisy.map((przepis) => {
 powrót <klucz div={przepis.id}>
<h1>{tytuł przepisu}</h1>
<img src={przepis.obraz} alt="obraz przepisu" />
 {recipe.dishTypes.map((typ, indeks) => {
 powrót <klucz rozpiętości={indeks}>{typ}</span>
 })}
</div>
 })}
</div>
 )
}

Komponent Recipes wyrenderuje plik dz element zawierający dane receptury dla każdej receptury w tablicy receptur.

Praca z tablicami w JavaScript

JavaScript oferuje szeroką gamę metod tablicowych, które upraszczają pracę z tablicami. W tym artykule pokazano, jak renderować dane z tablicy zagnieżdżonej przy użyciu metody tablicy map. Oprócz map istnieją również metody, które pomagają przesyłać dane do tablicy, łączyć dwie tablice, a nawet sortować tablicę.