React 状态未在函数中更新

Question

使用 React，我正在尝试制作一个国际象棋网站。

在我的应用程序功能中，我有以下代码：

const [playerSide, setPlayerSide] = useState('White');

function switchPlayerSide() {
  console.log('in switch, ' + playerSide);
  setPlayerSide(playerSide === 'Black' ? 'White' : 'Black');
}

在我的 ChessBoard 函数中，棋盘有一个 onDragStart 监听器，当用户拖动棋子时会调用该监听器：

function onDragStart(source, piece, position, orientation) {
     console.log(playerSide);

     if (game.current.in_checkmate() || game.current.in_draw())
         return false;

    return piece.charAt(0) === playerSide.charAt(0).toLowerCase() && _getSideToMove() === playerSide;
}

这应该只允许玩家在游戏未结束时移动，他们抓住正确的棋子，然后轮到他们移动。

还有一个 onDrop 监听器：

function onDrop(source, target, piece, newPos, oldPos, orientation) {
    // checks if move is valid
    let _playerMove = game.current.move({ from: source, to: target, promotion: 'q' });
    if (!_playerMove)
        return 'snapback';

    if (onDropListener)
        onDropListener();
}

如果有效，则会进行移动，并且还会调用 onDropListener 属性。

playerSide 和 onDropListener 作为 App 函数的 props 传递，如下所示：

<ChessBoard playerSide={playerSide} onDropListener={switchPlayerSide}/>

但是，在 onDragStart 和 switchSide 中，打印语句始终打印“白色”，即使我在任何函数之外的 App 和 ChessBoard 函数中有一些正确打印的打印（以便在页面重新渲染时调用打印）棋子落入有效方格后，首先出“白”，然后出“黑”。

此外，当我在第一次放置后开始拖动碎片时，应该已经过去了足够的时间，setPlayerSide 异步不应是问题的原因。

为什么会发生这种情况，我该如何解决？

Answer 1

这需要有括号：

     if (game.current.in_checkmate() || game.current.in_draw()) {
         return false;
      }

还有这里：

  if (!_playerMove) {
        return 'snapback';
}

这里：

 if (onDropListener) {
        onDropListener();
}

您的 setState 调用似乎是正确的，但您需要将所有 if 语句括在括号中。如果你来自 python...我明白了。当我从打字稿学习Python时，我遇到了完全相反的问题。