React — это популярная библиотека JavaScript для создания пользовательских интерфейсов. Это позволяет разработчикам создавать повторно используемые компоненты пользовательского интерфейса, которые можно отображать динамически. Одна из распространенных задач при работе с React — перебирать массив объектов и отображать их на экране. В этом руководстве мы покажем вам, как перебрать массив объектов в React.
Предпосылки
Прежде чем приступить к изучению этого руководства, вы должны иметь базовое представление о React и JavaScript.
Шаги
- Создать массив объектов
Чтобы перебрать массив объектов, нам сначала нужно создать массив объектов. Например, давайте создадим массив пользователей, у каждого из которых есть свойство имени и возраста.
const users = [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
{ name: 'Bob', age: 35 }
];
- Отрисовка массива объектов
Чтобы отобразить массив объектов, мы можем использовать функцию карты в JavaScript. Функция карты принимает функцию обратного вызова в качестве аргумента и возвращает новый массив с результатами вызова функции обратного вызова для каждого элемента в исходном массиве.
function App() {
const users = [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
{ name: 'Bob', age: 35 }
];
return (
<div>
{users.map((user) => (
<div>
<h1>{user.name}</h1>
<p>{user.age}</p>
</div>
))}
</div>
);
}
В приведенном выше коде мы используем функцию карты для циклического просмотра массива пользователей и отображения свойств имени и возраста каждого пользователя.
- Добавьте уникальную ключевую опору
При рендеринге списка элементов с помощью функции карты важно включить уникальную ключевую опору для каждого элемента. Это помогает React идентифицировать каждый элемент и оптимизировать процесс рендеринга.
function App() {
const users = [
{ name: 'John', age: 25 },
{ name: 'Jane', age: 30 },
{ name: 'Bob', age: 35 }
];
return (
<div>
{users.map((user, index) => (
<div key={index}>
<h1>{user.name}</h1>
<p>{user.age}</p>
</div>
))}
</div>
);
}
В приведенном выше коде мы передаем индекс каждого пользователя в качестве реквизита ключа.
Заключение
В этом руководстве мы показали вам, как перебрать массив объектов в React. Используя функцию карты и включив уникальную ключевую опору, вы можете легко отображать список элементов в своем приложении React.