Reactjs 地图有效，但 forEach 无效

IT技术 javascript reactjs foreach
2021-04-13 06:55:03

我正在努力理解 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>
  );
}
5个回答

该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>
  );
}
伟大的文化！所有的尊重！👋
2021-05-28 06:55:03
key道具在哪里？
2021-06-09 06:55:03
当有人发现这种错误时，我喜欢它。当我的代码像这样被审查时，我喜欢它
2021-06-11 06:55:03
欢迎 ！始终确保以高质量回答。
2021-06-12 06:55:03

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

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

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

正如@Nenad Vracar 提到的，map实际上会返回东西。如果你想对另一个数组、对象或一段代码做一些事情，你可以使用forEach. 但是因为你想返回一些最终显示在 DOM 上的东西。使用map.

另外，不要忘记return您正在映射的任何内容。这是一个常见的错误，因为您不需要使用 return for forEach。

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

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

通过像 forEach 这样的副作用工作，您将没有任何要解析的内容。

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()

其它你可能感兴趣的问题
上一篇在 render() 内react函数 下一篇Webpack：如何使用 webpack-dev-server 编译、写入磁盘和提供静态内容 (js/css)