在反应中填充多维数组

【问题标题】：Filling multidimensional array in react在反应中填充多维数组
【发布时间】：2022-06-10 19:56:44
【问题描述】：

我正在尝试填充 10X10 扫雷板，但在随机坐标添加炸弹时遇到问题。当我使用 console.log 时，板上的所有单元格的 isBomb 字段都为 true 另外这里是 stackblitz 链接https://stackblitz.com/edit/react-uqcox1?file=src/components/Board.js

import React, { useEffect, useState } from 'react'

const INITIAL_CELL = {
    isClicked: false,
    isBomb: false,
    isFlagged: false,
}

const CreateInitialBoard = () => {
    let board = Array.from({ length: BOARD_SIZE }, () => Array.from({ length: BOARD_SIZE }, () => INITIAL_CELL))
    board = AddBombs(board);
    return board;
}

const AddBombs = (board) => {
    let _board = board;
    console.log(board, "before");
    let randomX, randomY, bombsAdded = 0;

    while (bombsAdded < BOMB_COUNT) {
        randomX = Math.floor(Math.random() * BOARD_SIZE);
        randomY = Math.floor(Math.random() * BOARD_SIZE);
        _board[randomX][randomY].isBomb = true;
        bombsAdded++;
    }
    console.log(_board, "after");
    return _board
}

const BOARD_SIZE = 10;
const BOMB_COUNT = 10;

const INITIAL_BOARD = CreateInitialBoard();

export default function Board() {
    const [board, setBoard] = useState(INITIAL_BOARD);

    return (
        <div className='board'>
            {
                board.map((row, rowIndex) => {
                    return row.map((cell, cellIndex) => {
                        return (
                            <div key={`${rowIndex}-${cellIndex}`} className='cell'>
                                {rowIndex}, {cellIndex}
                            </div>
                        )
                    })
                })
            }
        </div>
    )
}

【问题讨论】：

• javascript.info/object-copy - 每个单元格都包含相同的对象。

标签： javascript arrays reactjs loops