TypeError：无法读取未定义的属性“查询”（react.js）答案

【问题标题】：TypeError: Cannot read property 'queries' of undefined (react.js)TypeError：无法读取未定义的属性“查询”（react.js）
【发布时间】：2021-09-04 01:55:40
【问题描述】：

这是我的代码：

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: 无法读取未定义的属性“查询”

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

【问题讨论】：

标签： javascript reactjs web typeerror react-query

【解决方案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 生态系统发展迅速，有时只是因为它们的各个部分以不同的速度发展而出现问题。

【讨论】：

谢谢，伙计，这对我有用，我正在学习 Tanner Linsley 的课程，然后这发生在我身上。我认为他需要更新他的课程！

【解决方案2】：

正如the documentation 所说：

开发工具被捆绑到react-query/devtools 包中。无需额外安装任何东西。

【讨论】：