React — это популярная библиотека JavaScript для создания пользовательских интерфейсов. Это позволяет разработчикам создавать повторно используемые компоненты пользовательского интерфейса, которые можно отображать динамически. Одна из распространенных задач при работе с React — перебирать массив объектов и отображать их на экране. В этом руководстве мы покажем вам, как перебрать массив объектов в React.

Предпосылки

Прежде чем приступить к изучению этого руководства, вы должны иметь базовое представление о React и JavaScript.

Шаги

  1. Создать массив объектов

Чтобы перебрать массив объектов, нам сначала нужно создать массив объектов. Например, давайте создадим массив пользователей, у каждого из которых есть свойство имени и возраста.

const users = [
  { name: 'John', age: 25 },
  { name: 'Jane', age: 30 },
  { name: 'Bob', age: 35 }
];
  1. Отрисовка массива объектов

Чтобы отобразить массив объектов, мы можем использовать функцию карты в 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>
  );
}

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

  1. Добавьте уникальную ключевую опору

При рендеринге списка элементов с помощью функции карты важно включить уникальную ключевую опору для каждого элемента. Это помогает 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.