Reactjs地图有效但forEach却没有

Question

我正在努力理解forEach和map之间的区别.在下面的渲染函数中,如果'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>
  );
}

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您正在映射的任何内容。这是一个常见的错误，因为您不需要使用 return forEach。