时间戳

首页 > 解决方案 > TypeError：无法读取未定义的属性“查询”（react.js）

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

问题描述

这是我的代码：

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

在此处输入图像描述

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

标签： javascriptreactjswebtypeerrorreact-query

解决方案

根据这条线...

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

推荐阅读