React useState状态更新异常：国际象棋谜题应用回合判断失效

问题根源 #

核心问题是React状态的异步更新与闭包捕获旧值：当AI通过boardRef.current.makeMove()走棋后，虽然调用setIsUserTurn(true)更新了状态，但move事件回调是在状态更新前形成的闭包，捕获的是更新前的旧状态值（false），导致后续逻辑判断出错。

解决方案 #

1. 使用Ref存储实时状态 #

React的useRef可存储可变值，其current属性会实时更新，不会被闭包捕获旧值。我们可以用它同步状态的最新值：

import { useState, useRef, useEffect, useCallback } from 'react';

function PuzzlesPage() {
  const [isUserTurn, setIsUserTurn] = useState(false);
  const isUserTurnRef = useRef(false);
  const boardRef = useRef(null);

  // 同步状态到Ref
  useEffect(() => {
    isUserTurnRef.current = isUserTurn;
  }, [isUserTurn]);

  // AI走棋逻辑
  const makeAIMove = useCallback((move) => {
    boardRef.current.makeMove(move);
    setIsUserTurn(true);
  }, []);

  // 处理Board组件的move事件
  const handleBoardMove = useCallback((move) => {
    // 用Ref获取最新的回合状态
    if (!isUserTurnRef.current) {
      // 忽略AI触发的走棋事件
      return;
    }

    // 处理用户走棋的逻辑（验证是否正确、推进谜题等）
    // ...
  }, []);

  // 加载谜题后触发AI第一步
  useEffect(() => {
    if (puzzleLoaded) {
      makeAIMove(firstAiMove);
    }
  }, [puzzleLoaded, makeAIMove]);

  return (
    <div>
      <Board ref={boardRef} onMove={handleBoardMove} />
      {/* 其他组件 */}
    </div>
  );
}

2. 用单一枚举状态替代双布尔值 #

将isUserTurn和isComputerMove合并为一个枚举类型的状态，更清晰且避免状态不一致：

const [gamePhase, setGamePhase] = useState<'idle' | 'user-turn' | 'computer-turn'>('idle');
const gamePhaseRef = useRef<'idle' | 'user-turn' | 'computer-turn'>('idle');

useEffect(() => {
  gamePhaseRef.current = gamePhase;
}, [gamePhase]);

// AI走棋时更新状态
const makeAIMove = () => {
  boardRef.current.makeMove(aiMove);
  setGamePhase('user-turn');
};

// 处理move事件
const handleBoardMove = useCallback((move) => {
  if (gamePhaseRef.current !== 'user-turn') {
    return;
  }
  // 用户走棋逻辑
  // 验证正确后，切换到AI回合
  setGamePhase('computer-turn');
}, []);

3. 直接标记AI走棋来源 #

在AI执行走棋时，设置一个临时的Ref标志，明确区分走棋触发方，彻底避免依赖状态判断：

const isAIMoveInProgress = useRef(false);

const makeAIMove = (move) => {
  isAIMoveInProgress.current = true;
  boardRef.current.makeMove(move);
  isAIMoveInProgress.current = false;
  setIsUserTurn(true);
};

const handleBoardMove = useCallback((move) => {
  // 直接判断是否是AI触发的走棋
  if (isAIMoveInProgress.current) {
    return;
  }

  if (!isUserTurnRef.current) {
    return;
  }

  // 用户走棋逻辑
  // ...
}, []);

关键注意事项 #

• 始终用useCallback包裹事件回调，确保回调能访问到最新的Ref值，避免组件重渲染时创建新的闭包。
• 避免在事件回调中直接依赖React状态，优先使用Ref获取实时值，解决异步更新导致的状态不一致问题。

内容的提问来源于stack exchange，提问作者Yan Vitkovskiy