React Query请求axios时出错

cu6pst1q  于 2024-01-07  发布在  iOS
关注(0)|答案(1)|浏览(158)

每次尝试发送axios请求获取数据时,我都会遇到此错误消息。'从v5开始,调用查询相关函数时只允许“Object”形式。请使用错误堆栈查找罪魁祸首调用。'
我还在学习react,所以我目前无法通过开发工具找到罪魁祸首。
这是我调用react查询提供程序的最顶层组件
App.js

  1. import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
  2. function App() {
  3. const client = new QueryClient();
  4. return(
  5. <div>
  6. <QueryClientProvider client={client}>
  7. <ReactQuery/>
  8. </QueryClientProvider>
  9. </div>
  10. );
  11. };

字符串
这是一个组件- React Query

  1. import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom';
  2. import Navbar4 from './Navbar4';
  3. import ReactHome from './pages/ReactHome';
  4. import ReactProfile from './pages/ReactProfile';
  5. import About from './pages/About';
  6. const ReactQuery = () => {
  7. return (
  8. <div>
  9. <h4>React Query</h4>
  10. <Router>
  11. <Navbar4/>
  12. <Routes>
  13. <Route path='/' element={<ReactHome/>}/>
  14. <Route path='/reactProfile' element={<ReactProfile/>}/>
  15. <Route path='about' element={<About/>}/>
  16. </Routes>
  17. </Router>
  18. </div>
  19. )
  20. }
  21. export default ReactQuery;


这是“ReactHome”组件,我在这里提交请求。
ReactHome.js

  1. import React from 'react';
  2. import {useQuery} from '@tanstack/react-query';
  3. import Axios from 'axios';
  4. const ReactHome = () => {
  5. const {data} = useQuery(['cat'], () => {
  6. return Axios.get("https://catfact.ninja/fact").then((res) => res.data);
  7. });
  8. return (
  9. <div>
  10. <p>React Home - {data.fact}</p>
  11. </div>
  12. )
  13. }
  14. export default ReactHome;


我尝试使用react query向一个API发出axios请求。每次这样做都会出现错误

hpcdzsge

hpcdzsge1#

请参阅@tanstack/react-query v5+中的API reference for useQuery()
钩子接受带有选项的对象,而不是单独的参数。

  1. const { data } = useQuery({
  2. queryKey: ["cat"],
  3. queryFn: async () => (await Axios.get("https://catfact.ninja/fact")).data,
  4. });

字符串
另请参阅迁移到TanStack Query v5
useQuery和朋友们曾经在TypeScript中有许多重载-调用函数的不同方式。这不仅很坚韧维护,类型明智,还需要运行时检查第一个和第二个参数的类型,以正确创建选项。
现在我们只支持对象格式。

相关问题