我正在尝试反应查询，并希望看到它缓存。我有一个页面，其中包含书籍列表。
注意，为简洁起见，有些代码显然只是为了展示重要部分而被省略了。
const useBooks = options => {
return useQuery(['books', options], bookApi.fetchBooks(options));
}
const Books = () => {
useEffect(() => () => console.log("unmount"), []);
const [options, setOptions] = useState({}); // options ex: { page: 1, search: "test"}
const {error, isLoading, data} = useBooks(options);
return books.map(book => <div>{book.name}</div>;
}
现在，这本书是我的应用程序中使用react-router-dom的“页面” ：
const App = () => {
return (
<Router>
<>
<Route exact path="/">
<Home />
</Route>
<Route path="/books">
<Books />
</Route>
</>
</Router>
)
}
当我在“主页”和“书籍”之间来回切换（通过单击应用程序中的“导航”链接）时，我看到书籍每次都在网络上获取。我还在控制台中看到“卸载”。
我最初将Routes包裹在Switch中，并删除了它，但是Books组件仍然似乎要卸载。我希望它不会卸载，也不会看到网络获取，并且书籍将从反应查询缓存中提取。我还尝试过使useBooks挂钩不使用搜索选项参数，但结果是相同的。
在我的情况下如何使用避免网络获取？
react-router当您离开组件时，它将卸载您的组件，是的。但这是有目的的，而不是问题。
当使用反应查询挂钩的组件挂载时，它将触发获取（由于挂载）。但是，如果您已经在高速缓存中为该特定键存储了数据，则将立即获得该数据作为“陈旧数据”返回，并且仅在后台进行获取。
如果要避免请求发出，可以执行以下任一操作：
refetchOnmount为，false以便在安装组件时不进行重新引用staleTime在您的查询上设置我建议设置staleTime：它将告诉react-query数据应被视为“新鲜”的时间。如果将其设置为5分钟，则5分钟内将不会进行后台重新引用-数据将始终直接来自缓存。staleTime默认为0，因此您将始终获得后台重新引用。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句