Reactjs 地图有效，但 forEach 无效

Question

我正在努力理解 forEach 和地图之间的区别。在下面的渲染函数中，如果将“forEach”替换为“map”，它就可以工作。我不明白为什么它不适用于“forEach”。 {item.id} 和 {item.text} 都存在于这两种方法中。那么，为什么在使用 ‘forEach’ 时没有设置 ‘TodoItem’ 的道具？

 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>
  );
}

原文由 DCR 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>
  );
}

原文由 Ajay Gaur 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

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

原文由 Gonzalo Pincheira Arancibia 发布，翻译遵循 CC BY-SA 3.0 许可协议