React中依赖state的条件判断逻辑未按预期生效问题排查

你的校验逻辑失效是JS闭包特性+React状态机制理解偏差共同导致的，核心问题如下：

• 闭包捕获了陈旧的状态值
  React的state更新是异步批量执行的，你在checkAllSubs里调用setIsError(true)时，不会同步修改当前函数作用域内的isError变量。setTimeout的回调是闭包，捕获的是触发checkAllSubs那一刻的isError值，只要触发校验时isError是false，哪怕你已经调用了setIsError更新状态，1秒后回调读到的还是旧的false值，自然会错误打印"all is good"。
• 校验逻辑设计冗余
  你完全不需要借助中间状态isError做中转判断，遍历用户列表时直接同步判断subscribed数组是否包含全部昵称即可，绕一层state+setTimeout平白引入了闭包问题。另外你用map做遍历副作用本身就不符合规范，map是用来生成新数组的，做全量判断应该用数组的every方法。
• 状态逻辑有遗漏
  你每次触发校验前没有重置isError为初始值，只要之前某次校验触发过错误，isError会一直保持true，后续校验逻辑会直接混乱；同时useCallback的依赖项漏了subscribed，闭包还可能捕获到旧的subscribed数组值，导致判断完全不准。

export const SubscribeOnOthers: React.FC = () => {
  const router = useRouter();
  const [subscribed, setSubscribed] = useState<Array<string>>([]);
  const [isError, setIsError] = useState<boolean>(false);
  const [isSuccess, setIsSuccess] = useState<boolean>(false);

  const users = [
    { nickname: "@user1" },
    { nickname: "@user2" },
    { nickname: "@user3" },
    { nickname: "@user4" },
  ];

  const checkAllSubs = useCallback(() => {
    // 直接同步判断，不需要绕state和setTimeout
    const allSubscribed = users.every(({ nickname }) => subscribed.includes(nickname));
    if (allSubscribed) {
      setIsError(false);
      console.log("all is good");
      // 后续跳转、成功状态逻辑写在这里
    } else {
      setIsError(true);
    }
  }, [subscribed]);

  return (
    // 组件原有渲染逻辑
  )
}

补充说明：如果确实需要等待状态更新后再执行后续逻辑，不要用setTimeout猜延迟时间，应该把相关逻辑放到useEffect里监听对应状态的变化，从根源避免闭包陈旧值问题。

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