Reactjs 映射有效，但 forEach 不起作用

Question

我正在努力理解foreach和map之间的区别。在以下渲染函数中，如果" foreach"被"映射"替换为" foreach"。我不明白为什么它不适合" foreach"。{item.ID}和{item.text}均具有两种方法。那么，为什么使用" foreach"时未设置"待办事项"的道具？

render() {    
  return(
     <ul>
        {this.props.items.forEach(function(item) {
           return (
              <TodoItem id={item.id} text={item.text} />)
        })} 
     </ul>
  );
}

因此，如果" foreach"不返回任何内容，那么如何也无法工作：

render() {    
  return(
     <ul>
        {this.props.items.forEach(function(item) {               
              <TodoItem id={item.id} text={item.text} />
        })} 
     </ul>
  );
}

Answer 1

map函数返回一系列项目，而 forEach只需在它们上循环。为了使此代码工作使用：

render() {    
  const items = [];
  this.props.items
    .forEach(item => items.push(
                       <li>
                          <TodoItem id={item.id} key={item.id} text={item.text} />
                       </li>
                     ))
  return(
     <ul>{items}</ul>
  );
}

Answer 2

尝试以下简单示例，以了解为什么在这种情况下foreach不起作用：

[1,2,3].forEach((n)=> n); => returns undefined
[1,2,3].map((n)=> n); => returns [1,2,3]

Answer 3

@nenad vracar提到的map实际上将返回东西。如果您想对另一个数组，对象或代码进行整理，则可以使用forEach。但是，由于您想返回最终显示在DOM上的东西。使用map。

另外，不要忘记 return无论您映射什么。这是一个常见的错误，因为您不需要使用forEach的返回。

Answer 4

基本上是 map返回数组，而 forEach却没有返回

在JSX/React上下文中，您需要返回一个分析器列表/节点标签的列表，而解析器将在真实和虚拟DOM中转换为节点；

像foreach这样的副作用工作您没有任何解析。

Answer 5

foreach（）只需循环循环。它丢弃了返回值，并且始终返回未定义。这种方法的结果没有给我们输出。

map（）通过元素循环分配内存，并通过迭代主数组来存储返回值。

var numbers = [2, 3, 5, 7];
var forEachNum = numbers.forEach(function(number) {
  return number
})
console.log(forEachNum)
//output undefined
var mapNum = numbers.map(function(number) {
  return number
})
console.log(mapNum)
//output [2,3,5,7]
//map() is faster than forEach()

Answer 6

地图返回一个新数组，而foreach返回未定义。

这是两种方法之间的一些差异。

映射分配内存，并存储返回值，而foreach扔掉返回值并始终返回未定义。

地图是可链的，但不是。这意味着您可以在地图之后使用其他方法，而不是在foreach之后使用。

映射用于转换数组的元素，而foreach用于循环穿过数组的元素。

地图返回一个值数组，而foreach返回未定义。

希望这会有所帮助！