如何在组件卸载时取消RTK Query的pollingInterval？

首先纠正你代码里的几个明显错误：

• undfined拼写错误，应为undefined
• setCancellPoling是拼写错误，对应state的setter应该是setCancelPolling
• useEffect的清理函数写法错误，你在effect里定义了函数但未返回，导致组件卸载时根本不会执行这段逻辑

接下来给你两种靠谱的解决方案：

方案一：利用状态控制pollingInterval #

通过状态切换，在组件卸载时把pollingInterval设为0（RTK Query中，pollingInterval为0或false时会停止轮询）：

export const MyComponent = () => {
  const [stopPolling, setStopPolling] = useState(false);

  useGetTestQuery(undefined, {
    // 未停止时设为60秒一次，停止时设为0
    pollingInterval: stopPolling ? 0 : 60000,
  });

  useEffect(() => {
    // 组件卸载时触发清理函数，设置停止状态
    return () => {
      setStopPolling(true);
    };
  }, []);

  return <div>你的组件内容</div>;
};

方案二：直接使用useQuery返回的cancelRefetch方法 #

RTK Query的useQuery钩子会返回cancelRefetch方法，这个方法不仅能取消当前正在进行的请求，还会清除轮询的定时器，彻底停止后续轮询，不需要额外维护状态，更简洁：

export const MyComponent = () => {
  // 获取cancelRefetch方法
  const { cancelRefetch } = useGetTestQuery(undefined, {
    pollingInterval: 60000,
  });

  useEffect(() => {
    // 组件卸载时调用cancelRefetch停止轮询
    return () => {
      cancelRefetch();
    };
  }, [cancelRefetch]);

  return <div>你的组件内容</div>;
};

补充说明：正常情况下，组件卸载时RTK Query应该自动停止轮询，如果你遇到轮询没停的情况，大概率是之前的代码逻辑错误导致订阅没被正确取消。上面的第二种方案是最直接的内置解决方式，不需要额外状态，推荐使用。

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