React useEffect中Interval未清除问题：定时器无法正常停止

原代码核心问题 #

• useEffect 内的 if (!interval) 判断完全无效：每次 useEffect 执行时，interval 都是新声明的 null，导致每次都会创建新定时器，旧定时器从未被清理。
• 当 geocodingState.coords 置空时，else 分支里的 interval 仍是初始的 null，调用 clearInterval 属于无效操作。
• useEffect 依赖数组缺失 fetchCb 和 updateSpeed，会导致定时器使用旧的回调或更新间隔，引发逻辑偏差。
• fetchCb 的依赖数组未包含 appid 和 weatherDispatch，会捕获旧变量值，导致请求参数错误。

修复后的代码 #

export const Widget: FC<IWidgetProps> = ({ appid, flavor, showWidgetField, updateSpeed }) => {
    const { state: geocodingState } = useContext(GeocodingContext);
    const { dispatch: weatherDispatch } = useContext(WeatherContext);

    const fetchCb = useCallback(() => {
        if (geocodingState.coords) {
            getWeatherInfo(weatherDispatch)(appid, geocodingState.coords.lon, geocodingState.coords.lat);
        }
    }, [geocodingState.coords, appid, weatherDispatch]); // 补全依赖

    useEffect(() => {
        // 仅当坐标存在时创建定时器
        if (!geocodingState.coords) return;
        
        const interval = setInterval(fetchCb, updateSpeed);
        
        // 清理函数：组件卸载或依赖变化时清除当前定时器
        return () => {
            clearInterval(interval);
        };
    }, [geocodingState.coords, fetchCb, updateSpeed]); // 补全依赖

    return (
        <>
        </>
    );
};

关键修复说明 #

1. 简化逻辑：直接判断坐标是否存在，不存在则跳过定时器创建，避免无效分支。
2. 可靠清理：每次 useEffect 执行前，旧的清理函数会自动触发，清除上一次的定时器，再根据当前坐标状态决定是否创建新定时器。
3. 补全依赖：确保 useEffect 和 useCallback 依赖所有用到的外部变量，避免闭包陷阱和 stale 值问题。
4. 边界防护：fetchCb 内保留坐标判断，防止定时器触发时坐标已被置空的异常情况。

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