React-Query GET请求成功但data为undefined无法渲染数据

接口请求成功但React Query返回的data为undefined，是代码笔误+React生命周期用法错误共同导致的，按以下顺序排查修复：

• 核心笔误：axios调用语法错误，导致query函数未正确返回数据
  自定义hook中的axios请求部分存在两个直接影响运行的问题：

  1. axiosInstance.get<ResultWrapper<FinancialData[]>> 泛型闭合后多打了一个多余的英文.，相当于尝试访问get方法的不存在属性后再做调用，会直接触发JS运行时错误，query函数执行失败，无法把返回值同步给React Query状态
  2. 单引号包裹的请求URL被直接折行，JS中普通单/双引号字符串不支持直接换行，会触发语法错误；如果是粘贴代码导致的格式折行，也要检查实际代码中URL是否被意外插入了换行、多余空格，导致返回数据不符合预期

  修复后的hook请求逻辑如下，建议先把响应赋值给变量再返回，避免链式调用的括号/点写错位置：

  const useGetFinancialData = (
    options: UseQueryOptions<FinancialData[], string> = {}
  ): UseQueryResult<FinancialData[], string> =>
    useQuery<FinancialData[], string>(
      useGetFinancialDataKey,
      async () => {
        const res = await axiosInstance.get<ResultWrapper<FinancialData[]>>(
          'https://financialmodelingprep.com/api/v3/search?query=AA&limit=10&exchange=NASDAQ&apikey=ENTERAPIKEY'
        )
        // 调试时可打开下面这行，确认返回结构是否符合预期
        // console.log('接口原始响应:', res)
        return res.data.result
      }, 
      options
    );
  

• 生命周期用法错误：渲染阶段调用状态更新函数，导致渲染循环中断
  你在useMemo回调中直接调用了setPage(0)，useMemo是组件渲染过程中同步执行的逻辑，渲染阶段调用状态setter会立即触发新一轮重渲染，严重时会触发无限重渲染循环，导致React中断渲染流程，数据无法正常映射到视图。
  页码重置逻辑应该放到useEffect中，监听搜索词变化触发：

  // 搜索词变化时重置页码，不要写在useMemo里
  useEffect(() => {
    setPage(0)
  }, [searched])
  
  const filteredRows = useMemo(() => {
    const query = searched.toLowerCase();
    return financialData?.filter(
      (item) => item.name.toLowerCase().includes(query)
    );
  }, [searched, financialData]);
  

• 缺失状态兜底逻辑，未捕获请求异常
  React Query在请求第一次加载、执行报错时，data的默认值就是undefined，你目前只解构了data字段，没有处理加载、错误状态，也没有打印错误信息，很难定位问题。建议补充状态判断：

  const { data: financialData, isLoading, error } = useGetFinancialData();
  
  // 调试用，可直接看到query的全量状态
  console.log('Query状态:', { financialData, isLoading, error })
  
  if (isLoading) return <div>数据加载中...</div>
  if (error) return <div>加载失败：{error}</div>
  

• 类型定义优化（不影响运行，建议调整）
  你定义的FinancialData接口中包含了前端组件用的handleViewData回调字段，这个字段不是接口返回的内容，容易造成类型误导。建议拆分接口返回类型和组件Props类型：

  // 仅定义接口实际返回的字段
  export interface FinancialData {
    symbol: string;
    name: string;
    stockExchange: string;
    exchangeShortName: string;
    currency: string;
  }
  
  // 表格行组件Props继承接口类型，额外加回调字段
  interface FinancialDataRowProps extends FinancialData {
    handleViewData: () => void
  }
  

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