为什么useEffect钩子的清理看到RTKQ的结果是isLoading，如何避免这个问题?

Question

我有一个React函数组件(一个路由组件)，当它被卸载时(即用户单击浏览器的后退按钮)应该做一些事情，并包含以下相关行:

// ...
const params = useParams<ISomeInterfaceHere>();
// ...
// I verified that `data` below actually loads but it does not last until the component unmounts.
const { data, isLoading, isError } = useGetSomethingQuery(params.x, {
refetchOnMountOrArgChange: true,
});
// ...
useEffect(() => {
return () => {
// current state:
//
// isLoading === true
// isError === false
// data === undefined
};
}, []);
// ...

它是否与react-router包中的useParams钩子有关?这是RTKQ中的错误吗?如果不是，定义的行为是什么?而且，最重要的是，我如何在组件卸载之前获得data的最后定义值?

没有错误信息。

<标题>

更新1 我使用:

"react": "^16.14.0",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"@reduxjs/toolkit": "^1.6.0",

<标题>更新2 h1> 确信params没有得到更新，甚至没有params.x。我也升级到@reduxjs/toolkitv1.6.1，我有同样的问题。 <标题>

3 更新这里是带有孤立问题的代码沙箱。在我看来，这是RTKQ的一个bug。

<标题>

更新4我在这里打开了一个GH bug报告。

Answer 1

在第一次渲染时创建清理回调。从那一刻起，回调将保留第一次渲染的陈旧变量，直到执行为止，即使在此期间发生了数百次渲染。

这与RTKQ无关——这就是React的工作方式。如果您希望在清理中访问最新的值，则必须通过ref:

进行隧道处理。

const { data, isLoading, isError } = useGetSomethingQuery(params.x, {
refetchOnMountOrArgChange: true,
});
const ref = useRef({data, isLoading, isError})
useEffect(() => { ref.current = {data, isLoading, isError} }, [data, isLoading, isError])
// ...
useEffect(() => {
return () => {
console.log(ref.current)
};
}, []);