React Query v5调用useQuery报错：仅允许使用Object形式传参

你的报错根源是React Query v5 彻底废弃了旧版useQuery的参数格式，必须使用对象形式传入配置，不能再用(queryKey, queryFn)这种分散参数的写法。

修改后的ReactHome.js代码 #

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

const ReactHome = () => {
    // 改用对象形式传入useQuery配置
    const { data } = useQuery({
        queryKey: ['cat'], // 查询键单独放在queryKey字段
        queryFn: () => {
            return Axios.get("https://catfact.ninja/fact").then((res) => res.data);
        } // 请求函数放在queryFn字段
    });

    // 新增可选链判断：避免组件初始化时data为undefined导致的报错
    return (
        <div>
            <p>React Home - {data?.fact}</p>
        </div>
    )
}

export default ReactHome;

关键说明 #

1. React Query v5 要求所有查询类Hook（useQuery/useInfiniteQuery等）必须接收单一配置对象，原分散式参数写法不再被支持
2. 原代码中的查询键、请求逻辑都要作为对象属性传入，这是v5的强制规范
3. 额外优化的data?.fact是为了处理组件首次渲染时data未加载完成的状态，避免控制台出现Cannot read property 'fact' of undefined的报错

其他组件无需调整 #

你的App.js和ReactQuery组件的写法符合v5要求，不需要修改。

内容的提问来源于stack exchange，提问作者Being47