React中使用Axios与React Query展示JSON对象时遇data未定义错误

架构老林

2026-8-15

解决React Query + Axios获取数据时data is undefined的 TypeError

核心排查与修复方向

处理React Query的状态阶段：
React Query在请求处于pending状态时，data默认是undefined。直接访问data的属性或调用数组方法（比如map）必然抛出TypeError。必须先通过状态判断做条件渲染：

const { data, isLoading, error } = useQuery(/* 配置项 */);

if (isLoading) return <div>加载中...</div>;
if (error) return <div>请求失败: {error.message}</div>;
// 确认data存在后再渲染内容
return <div>{JSON.stringify(data)}</div>;

修正Axios请求的返回值：
确保查询函数正确返回API响应的data字段，而非整个Axios响应对象：

const queryFn = async () => {
  // 正确写法：返回res.data
  const res = await axios.get('你的API地址');
  return res.data;

  // 错误写法：返回整个响应对象，后续需通过data.data访问数据
  // return axios.get('你的API地址');
};

验证API可用性：
直接在浏览器地址栏访问API地址，确认它能正常返回合法JSON。若API返回错误（如404、500），React Query会触发error状态，此时data仍为undefined，可通过捕获错误定位问题：

const queryFn = async () => {
  try {
    const res = await axios.get('你的API地址');
    return res.data;
  } catch (err) {
    console.error('API请求错误:', err);
    throw err; // 必须抛出错误，让React Query识别错误状态
  }
};

确认React Query Provider配置：
检查App.js中是否正确用QueryClientProvider包裹组件，且创建了合法的QueryClient实例：

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

const queryClient = new QueryClient();

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

export default App;