類型錯誤：無法讀取未定義的屬性“查詢”（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 Pl.nets from './components/Pl.nets' import People from './components/People' const queryClient = new QueryClient function App() { const [page, setPage] = useState('pl.nets') return ( <QueryClientProvider client={queryClient}> <div className="App"> <h1>Star Wars Info</h1> <Navbar setPage={setPage} /> <div className="content"> {page === 'pl.nets'? <Pl.nets />: <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 生態系統發展很快，有時事情會因為它們的部分以不同的速度發展而被破壞。

Answer 2

正如 文檔所說：

devtools 被捆綁到react-query/devtools包中。 無需安裝任何額外的東西。

Answer 3

原因

使用舊版本的 React Query Dev 工具導致了這個問題。

解決方案

npm i @tanstack/react-query-devtools

它可以是可以編寫以下代碼的任何組件，但更喜歡的方式是將其編寫在主 app.js 或路由器文件中。 這樣就可以在所有頁面上訪問開發工具。

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

function App() {
  return (
      <ReactQueryDevtools initialIsOpen={false} />
  )
}```

Answer 4

我想你忘了把 () 放在后面

"

Answer 5

如果您使用的是 v3，請確保使用庫附帶的開發工具 (react-query/devtools)，而不是單獨的 package react-query-devtools。