Как да картографирате върху вложен масив в React компонент

Повечето съвременни приложения консумират външни данни от други приложения и инструменти чрез API. Това данните идват във всички видове схеми и от вас зависи да ги деконструирате, докато не получите това, което искате използване. Сред тези схеми са обекти с данни, които съдържат вложени масиви. Може да бъде предизвикателство да се изобразят този вид данни. Тази статия ще ви научи как да картографирате вложен масив в компонент на React.

Използване на функцията за карта

Функцията map преминава през елементите от даден масив и връща посочения оператор или код за всеки.

За плосък масив функцията map работи по следния начин:

const arr = ['а', 'b', '° С'];
конст резултат1 = arr.map (елемент => {
връщане елемент;
});

В React трябва да обвиете функцията map с къдрави скоби и да използвате an функция стрелка за връщане на елемент на възел за всяка итерация. Елементите в плоския масив по-горе могат да бъдат изобразени като JSX елементи по този начин:

const arr = ['а', 'b', '° С']; 
функцияПриложение () {
връщане (
<>
 {arr.map((елемент, индекс) => {
<span key={index}>{a}</span>
 })}
</>
	)
}

Обърнете внимание, че присвоявате ключ на всеки елемент, който връща функцията map. Това помага на React да идентифицира елементи, които са били променени или премахнати. Това е важно по време на процеса на помирение.

Картографиране върху вложен масив в React компонент

Вложеният масив е подобен на масив, който съдържа друг масив. Например, следният масив от рецепти съдържа обект с масив.

конст рецепти = [
 {
 id: 716429,
 заглавие: "Паста с чесън, лук, карфиол & галета",
 изображение: "<https://spoonacular.com/recipeImages/716429-312x231.jpg>",
 dishTypes: [
"обяд",
"основно ястие",
"основно ястие",
"вечеря"
 ],
 рецепта: {
// данни за рецепта
 }
 }
]

За данни като тези с вложени масиви трябва да използвате функция за карта за всеки масив.

В този пример бихте картографирали върху масива от данни, както е показано по-долу:

износпо подразбиранефункцияРецепти() {
връщане (
<див>
 {recipes.map((recipe) => {
 връщане <div ключ={recipe.id}>
<h1>{recipe.title}</h1>
<img src={recipe.image} alt="изображение на рецепта" />
 {recipe.dishTypes.map((тип, индекс) => {
 връщане <span key={index}>{Тип}</span>
 })}
</div>
 })}
</div>
 )
}

Компонентът Рецепти ще изобрази див елемент, съдържащ данните за рецептата за всяка рецепта в масива recipes.

Работа с масиви в JavaScript

JavaScript предлага голямо разнообразие от методи за масиви, които правят работата с масиви по-лесна. Тази статия демонстрира как да изобразите данни от вложен масив с помощта на метод на картографски масив. Освен map, има и методи, които да ви помогнат да изпратите данни в масив, да свържете два масива или дори да сортирате масив.