Я изо всех сил пытаюсь перебрать массив в React

Question

Я просто пытаюсь распечатать список моего массива в другом div. Кажется, это не работает. Код ниже

import React from "react";
import "./navbar.css";

class Navbar extends React.Component{
  render(){
    const categories = ["Art", "Films", "Brands", "Restaraunts"];
    var categoryList = categories.forEach(function(category){
              return <div className='navbar-item'>{category}</div>;
          })
    // Real thing would equal const category = this.props.category.name;
    return(
      <div className='navbar'>
          { categoryList }
      </div>
      );
  }
}

export default Navbar;

Любая помощь будет принята с благодарностью.

Спасибо

Answer 1

Небольшая проблема. Замените forEach на map():

var categoryList = categories.map(function (category) {
  return (
    <div className='navbar-item'>{category}</div>
  );
});

Разница между forEach и map

Давайте сначала посмотрим на определения в MDN:

• forEach() - выполняет предоставленную функцию один раз для каждого элемента массива.
• map() - создает новый массив с результатами вызова предоставленной функции для каждого элемента в вызывающий массив.

Что именно это означает?

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

Между тем, метод map() также будет вызывать предоставленную функцию для каждого элемента в массиве. Разница в том, что map() использует возвращаемые значения и фактически возвращает новый массив того же размера.

Улучшения

Кроме того, быстрое предложение , Если я могу? Используйте функции стрелок.

var categoryList = categories.map(category => (
  <div className='navbar-item'>{category}</div>
);

Answer 2

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

Заимствование из других примеров, которые вы в итоге получите:

var categoryList = categories.map((category, key) => (
  <div key={key} className='navbar-item'>{category}</div>
);

Стоит отметить, что с этим ключом скорее всего, будет не очень уникальным, особенно в сложных приложениях, поэтому инструменты eslint могут настаивать на том, чтобы вы создали такой, который есть.

Answer 3

Используйте map вместо forEach. map возвращает новый массив, forEach - нет.