Javascript 无限循环，因为变量不断被重新声明为其原始值

这是对您最初创建的内容的重构，主要区别在于:

1. 当矿网格更新时，我们强制重新创建矿网格对象(数组的数组)，以确保React识别状态更改
2. 当当前没有放置地雷时，地雷单元的onClick处理程序将通过createMines函数在第一次单击时处理创建地雷.这样，状态只会作为操作的结果进行更改，而不是在每次渲染时更改.

示例:

const totalBombs = 40;
const square = { bomb: 0, viz: 0 };
const boardSideSize = 12;
// this is an easy way for us to recreate the mine_grid
const createDefaultGrid = () =>
  new Array(boardSideSize)
    .fill(0)
    .map(() => new Array(boardSideSize).fill(0).map(() => ({ ...square })));

// we call this once we want to initialize the game and place bombs
const createMineGridFromPositions = (minePositions) => {
  const grid = createDefaultGrid();
  minePositions.forEach(({ x, y }) => {
    grid[x][y].bomb = 1;
  });
  return grid;
};

// this is used to change mine_grid state. we create a new grid and return it
const createMineGrid = (grid) => {
  const new_grid = createDefaultGrid();
  new_grid.forEach((row, x) =>
    row.forEach((cell, y) => {
      cell.bomb = grid[x][y].bomb;
      cell.viz = grid[x][y].viz;
    })
  );
  return new_grid;
};

function App() {
  const [mine_grid, change_mine_grid] = useState(createDefaultGrid());
  const [mines_placed, change_mines_placed] = useState(false);
  const [game_over, set_game_over] = useState(false);

  const createMines = (firstX, firstY) => {
    const totalMines = [];
    while (totalMines.length < totalBombs) {
      const x = Math.floor(Math.random() * boardSideSize);
      const y = Math.floor(Math.random() * boardSideSize);
      console.log(x, y, totalMines);
      const gridPos = mine_grid[x][y];
      const sameAsFirstPos = x === firstX && y === firstY;
      if (
        gridPos.bomb === 0 &&
        gridPos.viz === 0 &&
        !sameAsFirstPos &&
        !totalMines.find((mines) => mines.x === x && mines.y === y)
      ) {
        totalMines.push({ x, y });
      }
    }
    const newGrid = createMineGridFromPositions(totalMines);
    newGrid[firstX][firstY].viz = 1;
    change_mine_grid(newGrid);
  };

  const clickHandler = (cell, x, y) => {
    if (cell.viz) {
      // if visible already this is a no-op. do nothing
      return;
    }

    if (!mines_placed) {
      createMines(x, y);
      change_mines_placed(true);
    } else {
      const new_mine_grid = createMineGrid(mine_grid);
      new_mine_grid[x][y].viz = 1;
      if (new_mine_grid[x][y].bomb) {
        set_game_over(true);
      }
      change_mine_grid(new_mine_grid);
    }
  }

  if (game_over) {
    // can render something different in this game state
    return null;
  }

  return (
    <div className="all">
      <div className="grid_container">
        {mine_grid.map((row, x) =>
          row.map((cell, y) => (
            <div
              key={`${x}-${y}`}
              style={{
                background:
                  cell.bomb && cell.viz ? "red" : cell.viz ? "green" : "gray",
                width: "50px",
                height: "50px",
                margin: "5px",
              }}
              onClick={() => clickHandler(cell, x, y)}
            />
          ))
        )}
      </div>
    </div>
  );
}

如果您进一步重构这一点，您可能会发现使用minePositions方法处理可见/炸弹单元的状态实际上比维护整个网格的状态更容易.