React useState异步特性导致useEffect内调用方法无法读取最新状态问题求解

你遇到的问题本质是React状态更新的异步特性 + 闭包捕获旧值导致的，这里有两种最常用的落地方式，根据你的业务场景选就行：

方案1：直接传递原始响应参数（最推荐，性能最优） #

你在socket的响应回调里已经拿到了所有需要的gameId、gameHistory原始值，完全不需要等待state更新，直接把需要的值作为参数传给handleGameEnd即可：

useEffect(() => {
  socket.emit("crash:info", (resp) => {
    const { status, gameId, gameHistory, mockVariable } = resp;
    setGameId(gameId);
    setGameHistory(gameHistory);
    setStatus(status);
    switch (status) {
      case 2:
        // 直接把需要的最新值传进去，不用依赖state
        handleGameEnd({ variable: mockVariable, gameId, gameHistory });
        break;
    }
  });
}, []);

const handleGameEnd = function (data) {
  const { variable, gameId, gameHistory } = data;
  // 直接用传进来的最新值，不会有异步问题
  if (gameHistory.filter((game) => game.gameId === gameId).length > 0) {
    return;
  }
  setGameHistory((prevHistory) => {
    const newGameHistory = [...prevHistory];
    newGameHistory.unshift({ gameId: gameId });
    newGameHistory.pop();
    return newGameHistory;
  });
};

方案2：用useEffect监听状态更新触发逻辑 #

如果你的handleGameEnd逻辑后续还需要在其他状态更新场景触发（比如其他地方修改了status也需要执行），可以把触发逻辑放到单独的useEffect里，依赖对应的状态变量，保证执行时拿到的都是最新的state：

// 先把需要的响应值都存到state
const [mockVariable, setMockVariable] = useState();

useEffect(() => {
  socket.emit("crash:info", (resp) => {
    const { status, gameId, gameHistory, mockVariable } = resp;
    setGameId(gameId);
    setGameHistory(gameHistory);
    setStatus(status);
    setMockVariable(mockVariable);
  });
}, []);

// 单独加一个useEffect监听状态，状态更新完成后自动触发逻辑
useEffect(() => {
  // 确保所有必要状态都已经初始化完成再执行
  if (status === 2 && gameId && gameHistory && mockVariable) {
    handleGameEnd({ variable: mockVariable });
  }
}, [status, gameId, gameHistory, mockVariable]);

这个方案里handleGameEnd不需要做任何修改，因为useEffect的依赖项变化时，拿到的都是最新渲染周期的state值。

补充说明 #

原来的代码执行时，setGameId等状态更新方法只是把更新请求加入React的更新队列，不会立刻修改当前闭包里的state值，所以同步调用handleGameEnd时拿到的还是初始的旧值，必须要么绕开state直接用原始数据，要么等到下一次渲染周期状态更新完成后再执行逻辑。

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