单击按钮时更新状态两次，React

Question

我想创建简单的 2048 游戏应用程序。我的初始板由 16 个数组元素组成。此函数旨在在随机空元素中生成值“2” 它工作得很好，并为我创建了一个随机的“2”，但是当我想在处理程序中调用它两次时问题就开始了 我读过关于 prevState 但不知道如何在这批代码中实现它才能正常工作。

这是我的游戏组件：

const width = 4;

const Game = () => {
  const [Board, setBoard] = useState([]);

  const createBoard = () => {
    let initialBoard = [];
    for (let i = 0; i < width * width; i++) {
      initialBoard.push("");
    }
    return initialBoard;
  };

  const generate = () => {
    let board = [...Board];
    let randomNumber = Math.floor(Math.random() * Board.length);
    console.log(randomNumber);
    if (board[randomNumber] === "") {
      board[randomNumber] = 2;
      setBoard(board);
    } else generate()
  };

  const handleNewGame = () => {
      generate()
  }

  useEffect(() => {
    setBoard(createBoard);
    console.log(`Board Created!`);
  }, []);

  return (
    <div className="game-container">
      <button onClick={handleNewGame}>NewGame</button>
      <div className="game">
        {Board.map((value, index) => (
          <div className="tile" key={index}>
            {value}
          </div>
        ))}
      </div>
    </div>
  );
};

export default Game;

我会为解决方法感到高兴。

Answer 1

我们只是函数而不是价值

const generate = () => {
  setState(Board => {
    let board = [...Board];
    while (true) {
      let randomNumber = Math.floor(Math.random() * Board.length);
      console.log(randomNumber);
      if (board[randomNumber] === "") {
        board[randomNumber] = 2;
        break
      }
    }
  }
}