在React中映射二维数组

如何解决在React中映射二维数组

我有一个名为GridSquare的简单组件：

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

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

export default GridSquare;

GridSquare的css文件只是使div成为一个简单的灰色方块：

.empty-square{
    display: inline-block;
    height: 30px;
    width: 30px;
    background-color: #555;  
}

我正在尝试使用名为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;

我想念什么？

解决方法

new Array(20)创建一个由20个 empty 元素组成的数组。
map方法会忽略 empty 元素，因此您应该填充数组：gamegrid[i] = new Array(20).fill(null);

,

为什么不这样：

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

您无需在GameGrid常量中定义外部网格的尺寸，而是显式创建一个20的数组，对其进行映射，并创建另一个20的数组以获取您的20X20网格。

注意，您可以将20用作变量，例如let size = 20，因此[...Array(20)]的这一部分将变成[...Array(size)]
这将使您能够动态更改应用程序的网格大小

,

以这种方式初始化数组是不够的。您还应该填充其元素：

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