为什么 forEach 方法在组件返回函数中不起作用？ [复制]答案

【问题标题】：Why forEach method wont work in component returning function? [duplicate]为什么 forEach 方法在组件返回函数中不起作用？ [复制]
【发布时间】：2021-02-11 00:27:37
【问题描述】：

为什么在 createGrid 的下例中，当 forEach 几乎与此相同时，我必须使用 array.map 方法

import React from 'react';
import Square from './Square.js'

const Board = ({squaresList}) => {
    const createGrid = squaresList.map((item, i) => { // squareList.forEach not working here - not returning <Square/> components.
        return(
            <Square key={i}id={item.id}/>
        )
    })
        return(
            <div className='game-board-container'>
                <div className='squares-container'>
                    {createGrid}
                </div>
            </div>
        )
}

export default Board;

【问题讨论】：

查看链接的副本并注意forEach的返回值is undefined

标签： javascript arrays reactjs components

【解决方案1】：

forEach() 方法实际上并没有返回任何东西（未定义）。它只是在数组中的每个元素上调用提供的函数。这个回调允许改变调用数组。

map() 方法还将在数组中的每个元素上调用提供的函数。不同的是map()利用了返回值，实际上返回了一个相同大小的新数组。

【讨论】：

【解决方案2】：

因为Array.prototype.map() 返回一个新数组，而Array.prototype.forEach() 返回undefined。

map() 和 forEach() 之间的选择取决于您的用例。如果您打算更改、替换或使用数据，您应该选择map()，因为它会返回一个包含转换后数据的新数组。

但是，如果您不需要返回的数组，请不要使用 map() - 而是使用 forEach() 甚至 for 循环。

查看来自FreeCodeCamp 的文章。他们写了一篇关于这两种方法之间差异的好文章。

【讨论】：

【解决方案3】：

map 创建一个新数组，而forEach 只是循环遍历数组。在这种情况下，我们希望 createGrid 是 Square 组件的数组。如果你使用forEach 那么createGrid 将是未定义的。

根据 MDN

map() 方法创建一个新数组，其中填充了对调用数组中的每个元素调用提供的函数的结果。

而在 forEach 中

forEach() 方法对每个数组元素执行一次提供的函数。

【讨论】：