Reactjs中的map函数可以正常工作，但是forEach函数无法正常工作

Question

我很难理解forEach和map之间的区别。如果在下面的渲染函数中用'map'代替'forEach'，它可以工作。为什么用'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'不返回任何东西，为什么这个也行不通：

所以如果`forEach`没有返回任何内容，为什么这个方法也不起作用：

render() {    
  return(

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

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

- DCR

---

Map返回修改后的新数组，而forEach只是遍历数组，并不返回任何内容。 - Nenad Vracar

使用map代替forEach - Abdennour TOUMI

使用map而不是forEach，这并没有回答问题。然而，为什么它不起作用呢？ - LarryBud

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

Answer 2

尝试这个简单的例子来理解为什么forEach在此上下文中不起作用：

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

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

- Gonzalo Pincheira Arancibia

---

我想在用户界面中显示项目，我可以使用forEach吗？ - Nithur

Answer 3

如@Nenad Vracar所提到的，map实际上会返回结果。如果你想对另一个数组、对象或代码片段进行操作，可以使用forEach。但是，如果你想返回一些最终显示在DOM中的东西，请使用map。

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

- redhedjim

Answer 4

基本上，map 返回一个数组，而 forEach 不返回任何东西，在 jsx/react context 中，您需要返回一个组件/节点标签列表，解析器将在真实和虚拟 DOM 中将其转换为节点；像 forEach 一样通过副作用进行操作，您将没有任何内容可解析。

- maioman

Answer 5

forEach()方法只是简单遍历元素。它会忽略返回值并且总是返回undefined。该方法的结果不会给我们提供任何输出。

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

- Hinesh Miyani

Answer 6

Map返回一个新的数组，而ForEach返回undefined。

以下是这两种方法之间的一些区别。

Map分配内存并存储返回值，而forEach丢弃返回值并始终返回undefined。

Map可以链式调用，但forEach不能。这意味着您可以在map之后使用其他方法，但不能在forEach之后使用。

Map用于转换数组的元素，而forEach用于循环遍历数组的元素。

Map返回一个值的数组，而forEach返回undefined。

希望这有所帮助！

- Jeremiah Dunphy

---

他并不是试图转换数组的元素，而是试图遍历它们。所以按照你的逻辑，他应该使用ForEach。 - undefined