React Query请求axios时出错

cu6pst1q  于 5个月前  发布在  iOS
关注(0)|答案(1)|浏览(55)

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

import {QueryClient, QueryClientProvider} from '@tanstack/react-query';

function App() {
const client = new QueryClient();

return(
<div>
<QueryClientProvider client={client}>
    <ReactQuery/>
</QueryClientProvider>
</div>
);
};

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

import {BrowserRouter as Router, Routes, Route, Link} from 'react-router-dom';
import Navbar4 from './Navbar4';
import ReactHome from './pages/ReactHome';
import ReactProfile from './pages/ReactProfile';
import About from './pages/About';

const ReactQuery = () => {
  return (
    <div>
        <h4>React Query</h4>
        <Router>
        <Navbar4/>
            <Routes>
                <Route path='/' element={<ReactHome/>}/>
                <Route path='/reactProfile' element={<ReactProfile/>}/>
                <Route path='about' element={<About/>}/>
            </Routes>
        </Router>
    </div>
  )
}

export default ReactQuery;


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

import React from 'react';
import {useQuery} from '@tanstack/react-query';
import Axios from 'axios';

const ReactHome = () => {
    const {data} = useQuery(['cat'], () => {
        return Axios.get("https://catfact.ninja/fact").then((res) => res.data);
    });

    return (
        <div>
            <p>React Home - {data.fact}</p>

        </div>
    )
}

export default ReactHome;


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

hpcdzsge

hpcdzsge1#

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

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

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

相关问题