作者：LinerContourMakeup_669 | 来源：互联网 | 2023-09-18 11:57
我正在关注我在YouTube上看到的一个使用ReactQuery的示例，但我似乎无法让缓存按预期工作。在我的应用程序中，每次都会获取数据。不确定我是否遗漏了一些明显的东西。这是我的代
我正在关注我在 YouTube 上看到的一个使用React Query的示例，但我似乎无法让缓存按预期工作。在我的应用程序中，每次都会获取数据。不确定我是否遗漏了一些明显的东西。这是我的代码：https : //codesandbox.io/s/eager-faraday-nhmlb?file=/src/App.js
单击“行星”和“人物”按钮时，我可以看到每次来回切换时发出的网络请求。我希望看到它至少在缓存仍处于活动状态的一段时间内对每组数据发出一次请求。
有谁知道可能有什么问题？
回答
从重要默认值部分：
通过useQuery或useInfiniteQuery默认情况下查询实例将缓存数据视为陈旧数据。
在以下情况下，过时的查询会在后台自动重新获取：
默认情况下，当成功获取查询时，它会立即被视为过时，这就是每次更改选项卡时都会重新获取数据的原因。如果您不想要激进的重新获取行为，您可以设置更长的时间staleTime（默认为0）：
const { isLoading, error, data } = useQuery("planets", fetchPlanets, {
staleTime: 10000, // only eligible to refetch after 10 seconds
});
您的代码中有另一个错误与 不太相关react-query，在您的以下代码中：
function App() {
const [page, setPage] = useState("planets");
const queryClient = new QueryClient();
const pageSetter = (page) => {
setPage(page);
};
return (
Star Wars Info
{page === "planets" ?
:
}
);
}
每次用户单击按钮以显示不同的数据时，整个组件都会重新渲染，queryClient创建一个新实例并将其传递给QueryClientProvider，从而重置客户端缓存的任何内部状态。你应该解耦你的组件以避免像这样不必要的重新渲染：
function Content() {
const [page, setPage] = useState("planets");
const pageSetter = (page) => {
setPage(page);
};
return (
Star Wars Info
{page === "planets" ?
:
}
);
}
// top level component, should not get re-rendered
function App() {
const queryClient = new QueryClient();
return (
);
}
现场演示
京公网安备 11010802041100号