useEffect清理函数中RTKQ返回isLoading为true的原因及解决方法

问题根因 #

1. 首先这不是useParams的问题，也不是RTKQ的bug。你当前遇到的第一重问题是React Hooks的标准闭包特性导致的：你使用的useEffect依赖数组为空，它的清理函数捕获的永远是组件首次渲染时的变量值，此时useGetSomethingQuery请求还未完成，data自然为undefined，isLoading为true。
2. 即使你给useEffect加上了data作为依赖，也可能出现拿不到值的情况：这是RTKQ的设计行为，当组件触发卸载时，会先取消对对应查询的订阅，hook返回的状态会被重置为初始值，再执行副作用清理函数。

解决方案 #

要拿到最后一次有效的data值，最通用的方案是用useRef同步存储最新的data：

const params = useParams<ISomeInterfaceHere>();
const { data, isLoading, isError } = useGetSomethingQuery(params.x, {
  refetchOnMountOrArgChange: true,
});

// 新增ref同步最新data
const latestDataRef = useRef<typeof data>();
// 每次data更新时同步到ref
useEffect(() => {
  latestDataRef.current = data;
}, [data]);

// 卸载时直接读取ref存储的最新值
useEffect(() => {
  return () => {
    if (latestDataRef.current) {
      // 在这里执行你的卸载逻辑，latestDataRef.current就是最后一次有效值
    }
  };
}, []);

如果需要更精准的缓存读取，也可以直接通过RTK查询的selector从全局store中拉取对应params.x的缓存结果，不需要依赖组件内hook的返回值。

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