使用React-Query和Axios解析JSON到TS对象时属性访问异常问题

可能原因及解决方案 #

1. 实际返回的数据结构与接口定义不匹配 #

虽然你定义了IncomingData接口，但服务器返回的JSON可能被嵌套在额外层级中（比如外层包裹了data字段）。即使React Query调试器显示查询成功，也需要确认实际返回的数据结构：

在请求回调中添加日志，打印原始响应数据：

let json_object = useQuery<IncomingData>("data_ex_key", async () => {
  try {
    const response = await axios.get('http://localhost:3000/api');
    console.log('原始响应数据:', response.data); // 查看真实结构
    return response.data;
  } catch (err) {
    throw err
  }
});

如果发现数据被嵌套（例如response.data.data才是目标对象），修改返回值：

return response.data.data;

2. 运行时数据类型与TypeScript接口不匹配 #

TypeScript的类型检查是编译时的，无法保证运行时数据符合接口定义。可以添加类型守卫来验证数据结构，避免访问不存在的属性：

export interface IncomingData {
  id: number;
  text_data: string;
}

// 类型守卫函数，验证数据是否符合IncomingData结构
function isIncomingData(data: unknown): data is IncomingData {
  return typeof data === 'object' && 
         data !== null && 
         'id' in data && 
         typeof (data as IncomingData).id === 'number' && 
         'text_data' in data && 
         typeof (data as IncomingData).text_data === 'string';
}

function App() {
  let json_object = useQuery<IncomingData>("data_ex_key", async () => {
    try {
      const response = await axios.get('http://localhost:3000/api');
      if (!isIncomingData(response.data)) {
        throw new Error('返回数据结构不符合预期');
      }
      return response.data;
    } catch (err) {
      throw err
    }
  });

  if (json_object.data) {
    console.log(json_object.data.text_data);
  }
}

3. React Query缓存问题 #

如果之前缓存了错误结构的数据，即使服务器返回正确数据，React Query可能会读取旧缓存。可以尝试：

• 强制刷新查询：调用json_object.refetch()
• 清除对应缓存键的数据：queryClient.invalidateQueries("data_ex_key")（需要先获取queryClient实例）

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