下面是我的代码：
import { useState } from 'react'
import { QueryClientProvider, QueryClient } from 'react-query'
import { ReactQueryDevtools } from 'react-query-devtools'
import Navbar from './components/Navbar'
import Planets from './components/Planets'
import People from './components/People'
const queryClient = new QueryClient
function App() {
const [page, setPage] = useState('planets')
return (
<QueryClientProvider client={queryClient}>
<div className="App">
<h1>Star Wars Info</h1>
<Navbar setPage={setPage} />
<div className="content">
{page === 'planets' ? <Planets /> : <People />}
</div>
</div>
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
)
}
export default App...失败，并显示以下错误：
TypeError：无法读取未定义的属性'queries'
我该怎么做才能解决这个问题？
3条答案
按热度按时间nhhxz33t1#
根据这条线...
...您使用的是React Query库的更新版本v3。引入
QueryClientProvider来替换ReactQueryConfigProvider和ReactQueryCacheProvider是它的关键特性之一。然而，对于你的代码来说，这个库更重要的特性是将Devtools合并到包中。
The older, already archived version of Devtools（导入到代码中）与React Query v2兼容，但与v3不兼容。
仅从错误消息中还不能很清楚地看出到底是什么坏了。我怀疑这是试图使用React Query v3中删除/修改的组件之一，例如QueryCache。
旁注：如果你严格按照教程的要求去做，那么很明显有些东西是坏的，大多数时候是依赖项版本的不兼容造成的。React生态系统发展很快，有时候东西是坏的，只是因为它们的部分以不同的速度发展。
kjthegm62#
如文档所述：
devtools被捆绑到
react-query/devtools包中。不需要安装任何额外的东西。bzzcjhmw3#
原因
使用旧版本的React Query Dev工具导致了此问题。
解决方案
它可以是任何组件，其中可以编写以下代码，但首选的方式是将其写入主app.js或路由器文件中。