3

我有一个 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
  };
}, []);

// ...

它与包装中的useParams钩子有关吗？react-router这是 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

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

更新 4

我在这里打开了一个 GH 错误报告。

4

1 回答 1

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)
  };
}, []);
于 2021-08-07T14:30:00.057 回答