React中使用Axios调用API报错：无法读取undefined的属性

你遇到的问题核心是错误对象的结构理解错了：

• 请求正常时catch块不会执行，所以首次运行没报错；但刷新时如果触发请求错误（比如临时网络波动、请求超时等），代码进入catch块，此时直接访问error.products会报错——因为Axios的error对象根本没有这个属性。

正确处理方式 #

1. 先明确Axios错误对象的真实结构 #

Axios的error对象核心包含这几个部分：

• error.response：仅当服务器返回错误状态码（如4xx、5xx）时存在，response.data才是服务器返回的错误内容
• error.request：请求已发送但未收到响应时存在
• error.message：错误描述文本

2. 安全访问错误数据 #

如果要获取服务器返回的products相关错误，用可选链操作符避免报错，同时访问正确层级：

.catch((error) => {
  // 先打印完整错误对象，确认实际结构
  console.log('完整错误信息:', error);
  // 安全访问服务器返回数据中的products字段
  console.log(error?.response?.data?.products);
});

3. 分场景兜底处理 #

也可以先判断error.response是否存在，再针对性处理：

.catch((error) => {
  if (error.response) {
    // 服务器返回了错误响应
    console.log(error.response.data.products);
  } else {
    // 请求未发送成功或无响应
    console.log(error.message);
  }
});

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