类型错误：无法读取未定义的属性“查询”（react.js）

Question

这是我的代码：

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

... 失败并出现此错误：

<块引用>

类型错误：无法读取未定义的属性“查询”

我该怎么做才能解决这个问题？

Answer 1

根据这一行...

import { QueryClientProvider, QueryClient } from 'react-query'

...您正在使用较新版本的 React Query 库 v3。引入 QueryClientProvider 来替换 ReactQueryConfigProvider 和 ReactQueryCacheProvider 是 one of its key features。

然而，对于您的代码，此库更重要的功能是合并 Devtools into the package。要导入它们，您现在应该使用...

import { ReactQueryDevtools } from 'react-query/devtools'

The older, already archived version of Devtools - 在您的代码中导入 - 与 React Query v2 兼容，但与 v3 不兼容。

仅从错误消息中还不清楚到底是什么损坏了。我怀疑这是尝试使用 React Query v3 中删除/修改的组件之一，例如 QueryCache。

---

作为旁注：如果您完全按照一些教程进行操作，但显然有些问题是错误的，大多数情况下是依赖项的版本不兼容。 React 生态系统发展很快，有时事情会因为各个部分的发展速度不同而崩溃。