Axios响应数据日志为空但组件却渲染出数据的问题求助

核心问题原因 #

你遇到的是控制台打印的「视觉误导」+ react-query缓存/状态更新的组合问题：

• 控制台对数组这类引用类型的打印是延迟解析的——你点击展开数组时才会读取当前内存的值，而打印瞬间数组可能还处于未填充状态（或被axios的Proxy包装，表面length为0但实际已有数据）。
• 组件能正常渲染是因为react-query在请求完成后更新了状态，触发组件重渲染时数据已经就绪。

具体解决方案 #

1. 修复react-query的Query Key

当前useCategory的Query Key固定为"categoryQuery"，会导致不同参数的请求共用同一份缓存，首次渲染可能先返回旧的空缓存数据，后续才更新为真实数据。修改为：

function useCategory(id: string = "") {
  return useQuery(["categoryQuery", id], () => categoryLoadList({ category: id }), {
    cacheTime: 20000,
    staleTime: 20000,
    refetchOnWindowFocus: false,
    retry: 0,
  });
}

2. 统一async/await写法，避免混用.then()

你的categoryLoadList同时使用了await和.then()，虽语法合法但易造成逻辑混淆，改为纯async/await风格：

const categoryLoadList = async ({ category }: CategoryLoadListRequestType): Promise<CategoryType[]> => {
  const url = `${process.env.REACT_APP_BASE_URL}/category${category !== "" ? "/search" : ""}`;
  const params = category !== "" ? { category } : undefined;
  
  const response = await axios.get<CategoryType[]>(url, { params });
  // 用结构化克隆打印真实的当前数据，避免控制台延迟解析的误导
  console.log("当前响应数据:", JSON.parse(JSON.stringify(response.data)));
  return response.data;
};

3. 验证axios响应结构

虽然组件能渲染，但可以确认后端返回格式是否符合预期：

• 打开Network面板的Response选项卡，检查返回的是直接数组，还是嵌套在data字段中（比如{ data: [...] }）。如果是后者，需调整为response.data.data。

4. 排查控制台打印的「假象」

控制台打印引用类型时显示的是实时内存状态，而非打印瞬间的状态。可以用以下方式打印打印瞬间的真实数据：

// 方式1：转为JSON字符串
console.log("打印瞬间的数据:", JSON.stringify(response.data));
// 方式2：创建数组副本
console.log("打印瞬间的数据:", [...response.data]);

额外说明 #

如果修改后仍有问题，可以利用react-query的状态判断，确保组件在数据就绪后再渲染：

const { data, isLoading, error } = useCategory();

if (isLoading) return <div>加载中...</div>;
if (error) return <div>加载失败</div>;

return <CategoryList data={data} />;

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