React异步代码中如何确保获取最新状态？

在以下代码示例中，点击「Deposit money」按钮后，在API调用返回前快速点击「Lock account」，即便账户已锁定，资金仍会存入。

export default function App() {
  const [balance, setBalance] = React.useState(1000);
  const [accountLocked, setAccountLocked] = React.useState(false);

  const onDepositMoney = () => {
    fetchAPI().then(() => {
      if (!accountLocked) {
        setBalance((b) => b + 100);
      }
    });
  };

  return (
    <div>
      <div>Current balance: {balance}</div>
      <div>{accountLocked ? "Account locked" : "Account unlocked"}</div>
      <button onClick={onDepositMoney}>Deposit money</button>
      <button onClick={() => setAccountLocked(true)}>Lock account</button>
    </div>
  );
}

问题根源在于：.then回调捕获的是accountLocked的过期值（初始的false），无法读取后续更新的true状态。

针对「React异步代码中如何确保获取最新状态」这个问题，常见的两种非稳健方案如下：

• 将两个状态变量合并为一个，虽能临时解决问题，但扩展性差，并非通用方案。
• 使用ref跟踪accountLocked的最新值，但同时用ref和状态指代同一数据，冗余且易引发混淆。

标准解决方案 #

1. 使用useReducer管理关联状态

当状态之间存在依赖关系（如余额更新依赖账户锁定状态），useReducer是更优选择——reducer函数能始终获取到最新的完整状态，从根源避免闭包过期值问题。

示例代码：

export default function App() {
  const [state, dispatch] = React.useReducer(
    (prevState, action) => {
      switch (action.type) {
        case 'DEPOSIT':
          // 基于最新状态判断是否执行存款操作
          return prevState.accountLocked 
            ? prevState 
            : { ...prevState, balance: prevState.balance + 100 };
        case 'LOCK_ACCOUNT':
          return { ...prevState, accountLocked: true };
        default:
          return prevState;
      }
    },
    { balance: 1000, accountLocked: false }
  );

  const onDepositMoney = () => {
    fetchAPI().then(() => {
      dispatch({ type: 'DEPOSIT' });
    });
  };

  return (
    <div>
      <div>Current balance: {state.balance}</div>
      <div>{state.accountLocked ? "Account locked" : "Account unlocked"}</div>
      <button onClick={onDepositMoney}>Deposit money</button>
      <button onClick={() => dispatch({ type: 'LOCK_ACCOUNT' })}>Lock account</button>
    </div>
  );
}

2. 用useRef同步最新状态（轻量场景）

如果场景简单，不想引入useReducer，可以通过useRef结合useEffect同步最新状态，让异步回调能读取到实时值：

export default function App() {
  const [balance, setBalance] = React.useState(1000);
  const [accountLocked, setAccountLocked] = React.useState(false);
  const accountLockedRef = React.useRef(accountLocked);

  // 状态更新时同步到ref
  React.useEffect(() => {
    accountLockedRef.current = accountLocked;
  }, [accountLocked]);

  const onDepositMoney = () => {
    fetchAPI().then(() => {
      // 读取ref的最新值判断状态
      if (!accountLockedRef.current) {
        setBalance((b) => b + 100);
      }
    });
  };

  return (
    <div>
      <div>Current balance: {balance}</div>
      <div>{accountLocked ? "Account locked" : "Account unlocked"}</div>
      <button onClick={onDepositMoney}>Deposit money</button>
      <button onClick={() => setAccountLocked(true)}>Lock account</button>
    </div>
  );
}

方案选择建议 #

• 优先使用useReducer：当状态逻辑复杂、存在多个关联状态时，它的代码结构更清晰，也更符合React状态管理的最佳实践。
• 轻量场景用useRef同步：适合状态逻辑简单、仅需跟踪单个状态最新值的场景。

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