ReactJS中useState状态变更未生效，定时器无法停止问题求助

你的问题核心在于闭包捕获的状态过时：checkStatus函数是组件挂载时通过useEffect调用的，它捕获的是初始的status状态值。哪怕你用setStatus更新了组件状态，这个函数内部的status依然是最初的{isComplete: false}，导致!status.isComplete永远为true，定时器会持续创建并运行。

下面给出两种可行的解决方案，优先推荐第一种：

方案一：用Ref跟踪轮询状态+清除定时器 #

使用useRef保存轮询状态和定时器ID，Ref的current属性是实时可变的，不会被闭包锁定旧值，同时能在组件卸载时清理定时器避免内存泄漏。

修改后的完整代码：

interface iStatus {
    status: string;
    message: string;
    isComplete: boolean;
}

const defaultStatus: iStatus = {
  status: 'test',
  message: 'test message',
  isComplete: false,
}

const StatusComponent = () => {
   const [status, setStatus] = useState(defaultStatus);
   const shouldPollRef = useRef(true); // 标记是否继续轮询
   const timerRef = useRef<NodeJS.Timeout | null>(null); // 保存定时器ID

   const checkStatus = async () => {
       if (!shouldPollRef.current) return; // 无需轮询直接终止
       try {
           const tempStatus: iStatus = await getStatusFromServer();
           setStatus(tempStatus);
           // 用刚获取的最新状态判断是否停止轮询
           if (tempStatus.isComplete) {
               shouldPollRef.current = false;
               return;
           }
       } catch (err) {
            console.log(err);
       } finally {
           // 仅当需要继续轮询时创建新定时器
           if (shouldPollRef.current) {
               timerRef.current = setTimeout(checkStatus, 2000);
           }
       }
   }

   useEffect(() => {
        checkStatus();
        // 组件卸载时清理资源
        return () => {
            shouldPollRef.current = false;
            if (timerRef.current) clearTimeout(timerRef.current);
        }
    }, []);

    return (<div>{status.message}</div>);
}

方案优势： #

• 直接使用接口返回的最新状态tempStatus判断，完全规避闭包导致的状态过时问题
• Ref的状态更新不会触发组件重新渲染，性能更优
• 组件卸载时自动清理定时器，避免内存泄漏

方案二：依赖最新状态（不推荐，存在性能损耗） #

如果不想用Ref，也可以将checkStatus用useCallback包裹并依赖status，但每次status更新都会重新创建函数，可能引发不必要的组件渲染：

const StatusComponent = () => {
   const [status, setStatus] = useState(defaultStatus);
   const timerRef = useRef<NodeJS.Timeout | null>(null);

   const checkStatus = useCallback(async () => {
       try {
           const tempStatus: iStatus = await getStatusFromServer();
           setStatus(tempStatus);
       } catch (err) {
            console.log(err);
       } finally {
           if (!status.isComplete) {
               timerRef.current = setTimeout(checkStatus, 2000);
           }
       }
   }, [status]);

   useEffect(() => {
        checkStatus();
        return () => {
            if (timerRef.current) clearTimeout(timerRef.current);
        }
    }, [checkStatus]);

    return (<div>{status.message}</div>);
}

注意事项： #

此方案中checkStatus依赖status，每次状态更新都会重新生成函数，useEffect也会重新执行，虽然能解决闭包问题，但性能不如方案一高效。

关于你之前尝试的问题说明：
你之前将setTimeout移到try块或catch块的操作，要么遗漏了失败时的重试逻辑，要么依然没有解决闭包捕获旧状态的问题，导致判断条件始终为true，定时器持续创建。

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