类型错误：无法读取未定义的属性“查询”（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是其主要特征之一。

然而，这个库对你的代码更重要的特性是将 Devtools 合并到包中。要导入它们，您现在应该使用...

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

Devtools 的较旧的、已经存档的版本——在你的代码中导入——与 React Query v2 兼容，但与 v3 不兼容。

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

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