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()方法实际上没有返回任何内容（未定义）。它只是在数组中的每个元素上调用提供的函数。允许此回调变异调用数组。

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

改进

如果可以的话，还可以快速提出建议？使用箭头功能。

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

Answer 2

使用map代替forEach。地图会返回一个新数组，forEach不会。

Answer 3

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

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

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

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

我正在努力遍历React

3 个答案: