我正在努力遍历 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() — 为每个数组元素执行一次提供的 function。
• map() — 使用在调用数组中的每个元素上调用提供的 function 的结果创建一个新数组。

这到底是什么意思？

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

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

改进

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

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

Answer 2

使用map而不是forEach 。 map 返回一个新数组，而 forEach 没有。

Answer 3

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

借用其他示例，您最终会得到：

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

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