react-query的useQuery返回undefined且组件不重新渲染问题排查

可能的原因及对应解决方案 #

1. 未正确配置QueryClientProvider

React Query 要求必须在组件树外层挂载QueryClientProvider并传入初始化的QueryClient实例，否则useQuery无法正常存储、返回请求数据。
请检查项目入口文件（如main.tsx/App.tsx）是否有类似如下配置：

import { QueryClient, QueryClientProvider } from 'react-query'
// 若使用v4及以上版本，导入路径为 @tanstack/react-query

const queryClient = new QueryClient()

ReactDOM.createRoot(document.getElementById('root')!).render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
)

2. 接口返回数据结构与取值逻辑不匹配

绝大多数后端接口会将实际业务数据包裹在统一响应结构体中，例如：

{
  "code": 200,
  "msg": "success",
  "data": [/* 实际产品列表 */]
}

你当前代码直接返回axios.get拿到的data字段，该字段对应后端返回的完整响应体，而非真正的产品列表，你需要修改getAllProducts的取值逻辑：

export const getAllProducts = async (): Promise<Product[]> => {
  const productEndPoint = 'http://localhost:5000/api/product';
  const { data } = await axios.get(productEndPoint);
  // 请根据实际接口返回结构调整，若列表存放在data.data则改为 return data.data
  return data.data as Array<Product>;
};

你可以在该函数中打印完整的axios响应结果，确认实际列表的存放路径。

3. 未处理请求加载状态

useQuery首次执行时，请求还在进行中，返回的data默认就是undefined，你需要先判断请求状态，再渲染表格：

const { data, isLoading, error } = useQuery('products', getAllProducts);

if (isLoading) return <div>加载中</div>
if (error) return <div>请求出错：{error.message}</div>
// 到此处data一定为有效值，再传递给表格组件

4. 版本不兼容导致的Query Key格式错误

如果你使用的是v4及以上版本的React Query（包名为@tanstack/react-query），要求查询Key必须为数组格式，不能直接传字符串，修改调用代码即可：

const { data } = useQuery(['products'], getAllProducts);

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