Reactjs 地图有效，但 forEach 无效答案

【问题标题】：Reactjs map works but forEach doesn'tReactjs 地图有效，但 forEach 无效
【发布时间】：2017-11-22 19:26:22
【问题描述】：

我很难理解 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>
  );
}

【问题讨论】：

Map 返回修改后元素的新数组，forEach 只是遍历数组而不返回任何内容。
使用 map 代替 forEach
"Use map instead forEach" 但是没有回答这个问题。为什么它不起作用。

标签： javascript reactjs foreach

【解决方案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>
  );
}

【讨论】：

key 道具在哪里？
欢迎您！始终确保以高质量回答。
我喜欢有人发现这样的错误。当我的代码被这样审查时，我喜欢它
伟大的文化！所有的尊重！ ?

【解决方案2】：

试试这个简单的例子，了解为什么 forEach 在这种情况下不起作用：

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

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

【讨论】：

【解决方案3】：

正如@Nenad Vracar 提到的map 实际上会返回东西。如果你想对另一个数组、对象或一段代码做点什么，你可以使用forEach。但是，由于您想要返回最终显示在 DOM 上的内容。使用map。

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

【讨论】：

【解决方案4】：

基本上map 返回一个数组，而forEach 什么也不返回，

在jsx/react context 中，您需要返回一个组件/节点标签列表，解析器将在真实和虚拟 dom 中的节点中转换这些组件/节点标签；

像 forEach 这样的副作用工作，你不会有任何东西要解析。

【讨论】：

【解决方案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()

【讨论】：