为什么 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

我确定 params 没有得到更新，甚至 params.x 也没有。我也升级到 @reduxjs/toolkit v1.6.1 我也有同样的问题。

更新 3

具有孤立问题的代码沙箱是 here。在我看来这是 RTKQ 中的一个错误。

更新 4

我打开了 GH 错误报告 here。

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)
  };
}, []);

为什么 useEffect 挂钩的清理将 RTKQ 的结果视为 isLoading 以及如何避免该问题？

Why is the cleanup of an useEffect hook seeing the result of an RTKQ as isLoading and how to avoid the issue?

reactjs

react-router

use-effect

rtk

rtk-query

更新 1

更新 2

更新 3

更新 4