React中useEffect循环请求异常：未获FINISH状态即停止请求

你的代码主要存在两个问题导致轮询提前停止：

1. 清理函数逻辑错误：当前仅在status === 'FINISH'时清除定时器，但组件卸载、依赖项变化（比如props更新）时，旧的定时器不会被清理，可能引发内存泄漏或重复请求；同时如果某次请求后status未发生变化（比如后端状态未更新、请求失败未处理），useEffect不会重新触发，轮询直接终止。

2. 未处理请求失败场景：如果getData请求报错，且action中没有捕获错误并更新状态，status会保持不变，useEffect不再执行，轮询停止。

修正后的代码方案（推荐递归setTimeout，避免请求叠加） #

const status = useSelector((state: any) => state.reports.status);
    
useEffect(() => {
    let timer: NodeJS.Timeout | null = null;

    const fetchLoop = async () => {
        try {
            // 若使用Redux Toolkit，unwrap()可获取异步action的执行结果并捕获错误
            await dispatch(getData(props.id)).unwrap();
        } catch (error) {
            // 请求失败时不中断轮询，可添加错误日志便于排查
            console.error('轮询请求失败:', error);
        }

        // 未达到FINISH状态，继续设置下一次轮询
        if (status !== 'FINISH') {
            timer = setTimeout(fetchLoop, 500);
        }
    };

    // 初始启动轮询
    if (status !== 'FINISH') {
        timer = setTimeout(fetchLoop, 500);
    }

    // 组件卸载或依赖变化时，强制清除定时器
    return () => {
        timer && clearTimeout(timer);
    };
}, [dispatch, status, props.id]); // 用具体的props.id代替整个props，减少不必要的重触发

额外注意事项 #

• 确保getData action在请求成功后正确更新redux中的status状态，包括所有中间状态（如PENDING、PROCESSING），如果status始终无变化，useEffect不会重复触发。
• 若不使用Redux Toolkit，需在getData的异步逻辑中自行处理错误，避免因请求失败导致状态停滞。
• 若后端在几次请求后不再返回新的status，需要排查后端逻辑是否正常推进状态到FINISH。

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