我正在使用 React Query 并尝试从内联 JSON 文件获取数据(用户)。
我已经使用 npm React-query
和 React-query-devtools 安装了它,并且只有 2 个文件。
App.js
:
import { QueryClient, QueryClientProvider } from 'react-query';
import { ReactQueryDevtools } from 'react-query-devtools';
import Users from './Users';
function App() {
return (
<div className="App">
<QueryClientProvider client={QueryClient}>
<Users />
<ReactQueryDevtools initialIsOpen />
</QueryClientProvider>
</div>
);
}
export default App;
Users.js
:
import React from 'react'
import { useQuery } from 'react-query';
const Users = () => {
const { isLoading, isError, data, error } = useQuery('test', () => (
fetch('https://jsonplaceholder.typicode.com/users').then((res) => res.json())
));
return (
<div>
{isLoading ? <h2>Chargement...</h2> : null}
{isError ? <h2>Une erreur est survenue : {error.message}</h2> : null}
<ul>
{data.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</div>
)
}
export default Users
我无法解决此错误:
TypeError: queryClient.defaultQueryObserverOptions is not a function
最佳答案
您应该将 QueryClient
实例用于 cleint
,而不是直接使用 QueryClient
。
根据 docs
import { QueryClient, QueryClientProvider } from 'react-query';
import { ReactQueryDevtools } from 'react-query-devtools';
import Users from './Users';
// Create a client
const queryClient = new QueryClient() // Instance of QueryClient
function App() {
return (
<div className="App">
<QueryClientProvider client={queryClient}> // <-- here
<Users />
<ReactQueryDevtools initialIsOpen />
</QueryClientProvider>
</div>
);
}
export default App;
关于javascript - 类型错误:queryClient.defaultQueryObserverOptions 不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65626311/