我正在嘗試填充 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>
)
}
uj5u.com熱心網友回復：
你必須更換
let board = Array.from({ length: BOARD_SIZE }, () => Array.from({ length: BOARD_SIZE }, () => INITIAL_CELL))
和
let board = Array.from({ length: BOARD_SIZE }, () => Array.from({ length: BOARD_SIZE }, () => { return { ...INITIAL_CELL } })
您在那里所做的是將 INITIAL_CELL 的 isBomb 欄位設定為 true，然后在任何地方重用它。建議您查看@ASDFGerte 的評論以獲取更多資訊。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/489173.html
標籤：javascript 数组 反应 循环
上一篇：在兩個單獨的串列中檢查相同的值