Question

为什么在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;

Answer 1

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

根据MDN

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

而forEach

forEach（）方法为每个数组元素执行一次提供的函数。

Answer 2

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

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

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

从FreeCodeCamp中查看文章。他们写了一篇很好的文章，介绍了这两种方法之间的区别。

Answer 3

forEach()方法实际上不返回任何内容（未定义）。它只是在数组中的每个元素上调用提供的函数。允许该回调方法更改调用数组。

map()方法还将在数组中的每个元素上调用提供的函数。区别在于map()使用返回值并实际上返回相同大小的新Array。

为什么forEach方法在组件返回函数中不起作用？

3 个答案: