我正在努力遍历 React 中的数组答案

【问题标题】：I am struggling to iterate through an array in React我正在努力遍历 React 中的数组
【发布时间】：2020-05-04 12:30:17
【问题描述】：

我只是想将我的数组的列表打印到另一个 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;

任何帮助将不胜感激。

谢谢

【问题讨论】：

运行它时没有错误。但是，没有任何返回留下一个空的 div
嗨，乔恩，欢迎来到 Stack Overflow。查看tour 并查看我的答案。如果答案对您有用，请评论澄清，如果没有问题，请在 10 分钟后单击勾选按钮接受。

标签： javascript arrays reactjs loops

【解决方案1】：

小问题。将forEach 替换为map()：

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

forEach 和 map 之间的区别

我们先来看看MDN上的定义：

forEach() — 为每个数组元素执行一次提供的函数。
map() — 使用对调用数组中的每个元素调用提供的函数的结果创建一个新数组。

这究竟是什么意思？

好吧，forEach() 方法实际上并没有返回任何东西（未定义）。它只是在数组中的每个元素上调用提供的函数。允许此回调变异调用数组。

同时，map() 方法还将在数组中的每个元素上调用提供的函数。不同之处在于map() 使用返回值，实际上返回一个相同大小的新数组。

改进

另外，如果可以的话，请快速提出建议？使用箭头函数。

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

【讨论】：

【解决方案2】：

使用map 代替forEach。 map 返回一个新数组，forEach 没有。

【讨论】：

【解决方案3】：

其他答案在这里是正确的，还值得补充的是，当返回这样的列表时，React 会唠叨你添加一个键（这是由于 React 如何处理带有元素列表的索引）。一个简单的方法是从地图中传递密钥。

借鉴您最终会得到的其他示例：

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

值得注意的是，使用此密钥，它很可能不是很独特，尤其是在复杂的应用程序中，因此工具 eslint 可能会坚持您创建一个。

【讨论】：