Javascript 在React中映射二维数组

我有一个叫做GridSquare的简单组件：

import React from 'react';
import './GridSquare.css'

const GridSquare = (props) => {
    
    return (
    <div className="empty-square">
    </div>
    )
}

export default GridSquare;

我试图用一个叫做grid的组件创建这些正方形的网格。我在映射2d数组时遇到困难。映射一维数组效果很好，但二维数组只打印空div

import React from 'react';
import GridSquare from './GridSqure'

const GameGrid= () => {
    const gamegrid=new Array(20);
    for(let i =0; i<gamegrid.length; i++)
        gamegrid[i] = new Array(20);

    console.log(gamegrid);
    
    return(
        <div>
            {
            gamegrid.map((row)=> 
            {
                return (
                    <div>
                        {
                            row.map(() => <GridSquare/>)
                        }
                    </div>
                )})
            }
        </div>
    )
}

export default GameGrid;

我遗漏了什么？

新数组20创建了一个包含20个空元素的数组。

---

map方法忽略空元素，因此应该填充数组：gamegrid[i]=newarray20.fillnull

这样初始化数组是不够的。您还应该填充它的元素：

for(let i =0; i<gamegrid.length; i++) {
    gamegrid[i] = new Array(20);
    gamegrid[i].fill(1); // this is just an example value
}

此外，还应向要映射的所有元素添加键：

return(
    <div>
        {
        gamegrid.map((row, i1)=> 
        {
            return (
                <div key={i1}>
                    {
                        row.map((el, i2) => <GridSquare key={i2} />)
                    }
                </div>
            )})
        }
    </div>
)

---

你为什么不这样做呢：

{[...Array(20)].map(() => (
  <div>
    {[...Array(20)].map(() => (
      <GridSquare/>
    ))}
  </div>
))}

您不需要在GameGrid常量中定义网格外部的维度，而是显式创建一个20的数组，映射它，然后创建另一个20的数组以获得20X20网格

注意，您可以将20作为一个变量，如let size=20，因此此部分[…Array20]变为[…Arraysize] 这将使您能够动态更改应用程序的网格大小

{[...Array(20)].map(() => (
  <div>
    {[...Array(20)].map(() => (
      <GridSquare/>
    ))}
  </div>
))}