Question

我很难理解forEach和map之间的区别。在下面的渲染函数中，如果＆＃39; forEach＆＃39;替换为＆＃39; map＆＃39;有用。我不明白为什么它不适用于每一个＆＃39;。两个方法都存在{item.id}和{item.text}。那么，为什么TodoItem＆＃39;的道具呢？使用＆＃39; forEach＆＃39;时没有设置？

render() {    
  return(

     <ul>
        {this.props.items.forEach(function(item) {

           return (
              <TodoItem id={item.id} text={item.text} />)
        })} 
     </ul>
  );
}

所以如果＆＃39; forEach＆＃39;为什么这不起作用也不会返回：

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

基本上map会返回一个数组，而forEach则不返回任何内容，

在jsx/react context中

你需要返回一个组件/节点标签列表，解析器将在真实和虚拟dom中的节点中进行转换;

像forEach这样的副作用工作，你将无法解析任何内容。

Answer 4

正如@Nenad Vracar所说，map实际上会返回内容。如果你想对另一个数组，对象或一段代码做些什么，你可以使用forEach。但是因为你想要返回最终在DOM上显示的内容。使用map。

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

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

Reactjs地图有效但不是每个都没有

5 个答案: