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