Reactjs 地图可以工作，但 forEach 不行

Question

我正在努力理解 forEach 和 map 之间的区别。在下面的渲染函数中，如果将“forEach”替换为“map”，则它可以工作。我不明白为什么它不能与“forEach”一起使用。这两种方法都存在 {item.id} 和 {item.text}。那么，为什么在使用 'forEach' 时没有设置 'TodoItem' 的 props 呢？

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

Map 返回一个新数组，而 ForEach 返回未定义。

以下是两种方法之间的一些区别。

Map 分配内存并存储返回值，而 forEach 会丢弃返回值并始终返回 undefined。

Map 是可链接的，但 forEach 不是。这意味着你可以在map之后使用其他方法，但不能在forEach之后使用。

Map 用于变换数组的元素，而 forEach 用于循环数组的元素。

Map 返回值数组，而 forEach 返回未定义。

希望这有帮助！