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

html5 • • 问答

这是我的代码：

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

回答

根据这条线...

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 生态系统发展很快，有时事情会因为它们的部分以不同的速度发展而被破坏。

以上是类型错误：无法读取未定义的属性“查询”（react.js）的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容