使用React Query编写代码无输出，请求排查错误原因

核心问题：queryFn 未返回异步结果 #

你的queryFn箭头函数中执行了Axios请求，但没有返回Promise对象，导致React Query无法接收和处理接口返回的数据。箭头函数使用大括号{}时，必须显式使用return返回值，否则默认返回undefined。

修复方式 #

有两种简单的修复方法：

方法1：显式返回Promise

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

export const Reactqueryex = () => {
const { data, isLoading, isError, refetch } = useQuery({
    queryKey: ["cat"], // 注意：queryKey 建议使用数组格式，符合React Query最佳实践
    queryFn: () => {
      // 显式返回Axios请求的Promise
      return Axios.get("https://catfact.ninja/fact").then((res) => res.data);
    },
  });

  // 可添加加载/错误状态提示，提升用户体验
  if (isLoading) return <div>加载中...</div>;
  if (isError) return <div>获取数据失败</div>;

  return (
    <div>
      <p>Generate Random Cat Fact using React query</p>
      <button onClick={refetch}>Update Fact</button>
      <p>The fact is: {data?.fact}</p>
    </div>
  );
};

方法2：简化箭头函数写法（省略大括号，自动返回）

将queryFn简化为：

queryFn: () => Axios.get("https://catfact.ninja/fact").then((res) => res.data)

额外检查点 #

确保你的组件被QueryClientProvider包裹，这是React Query正常工作的前提：

// 根组件示例
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Reactqueryex } from "./Reactqueryex";

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Reactqueryex />
    </QueryClientProvider>
  );
}

export default App;

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