Как сопоставить вложенный массив в компоненте React

Большинство современных приложений используют внешние данные из других приложений и инструментов через API. Этот данные поступают во всех типах схем, и вы должны деконструировать их, пока не получите то, что хотите. использовать. Среди этих схем есть объекты данных, содержащие вложенные массивы. Отрисовка такого рода данных может быть сложной задачей. Эта статья научит вас, как отображать вложенный массив в компоненте React.

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

Функция карты перебирает элементы заданного массива и возвращает указанный оператор или код для каждого.

Для плоского массива функция карты работает следующим образом:

константа обр = ['а', 'б', 'с'];
константа результат1 = обр.карта (элемент => {
возвращаться элемент;
});

В React вы должны заключить функцию карты в фигурные скобки и использовать стрелочная функция для возврата элемента узла для каждой итерации. Элементы в плоском массиве выше могут быть отображены как элементы JSX следующим образом:

константа обр = ['а', 'б', 'с']; 
функцияПриложение () {
возвращаться (
<>
 {arr.map((элемент, индекс) => {
<ключ диапазона = {индекс}>{а}</span>
 })}
</>
	)
}

Обратите внимание, что вы назначаете ключ каждому элементу, который возвращает функция карты. Это помогает React идентифицировать элементы, которые были изменены или удалены. Это важно в процессе примирения.

Сопоставление вложенного массива в компоненте React

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

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

Для таких данных с вложенными массивами вы должны использовать функцию сопоставления для каждого массива.

В этом примере вы должны отобразить массив данных, как показано ниже:

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

Компонент Recipes будет отображать див элемент, содержащий данные рецепта для каждого рецепта в массиве recipes.

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

JavaScript предлагает широкий спектр методов работы с массивами, которые упрощают работу с массивами. В этой статье показано, как визуализировать данные из вложенного массива с помощью метода массива карт. Помимо карты, существуют также методы, которые помогут вам поместить данные в массив, объединить два массива или даже отсортировать массив.