如何忽略axios GET请求中res.data.message为null引发的TypeError？

当然可以忽略这个错误，让代码继续执行！问题出在当res.data为null时，你直接尝试访问它的message属性，这就触发了TypeError。我们只需要在访问属性前做个简单的检查，或者用更简洁的语法处理null/undefined的情况就行。下面是几种实用的方案：

1. 使用可选链操作符（最简洁，ES2020+支持） #

ES2020引入的可选链?.语法可以完美解决这个问题——它会自动检查前面的对象是否为null或undefined，如果是的话就停止访问，返回undefined，不会抛出错误。只需要把你的代码改成这样：

.then((res) => this.setState({ message: res.data?.message }));

这样如果res.data是null，res.data?.message就会返回undefined，setState后message的值就是undefined，页面自然不会展示任何内容，代码也能继续执行。

2. 传统条件判断（兼容旧环境） #

如果你的项目还不支持ES2020的语法，那就用手动判断的方式，确保res.data存在时才访问它的属性：

.then((res) => {
  const message = res.data ? res.data.message : '';
  this.setState({ message });
});

或者更清晰的分支判断：

.then((res) => {
  if (res.data) {
    this.setState({ message: res.data.message });
  } else {
    // 可以设置message为空字符串，或者什么都不做
    this.setState({ message: '' });
  }
});

3. 添加错误捕获（让代码更健壮） #

除了处理res.data为null的情况，建议给axios请求加上catch块，捕获其他可能的错误（比如网络失败、服务器500错误等），避免整个组件因为未处理的异常崩溃：

axios
  .get(`/api/getMessage/${this.props.match.params.id}`, { 
    headers: { 'X-Auth-Token': token } 
  })
  .then((res) => this.setState({ message: res.data?.message }))
  .catch((err) => {
    // 这里可以记录错误日志，或者根据需求给用户提示
    console.error('获取消息时出错:', err);
    // 可选：设置message为空，避免页面展示异常内容
    this.setState({ message: '' });
  });

总结 #

推荐优先使用可选链+catch的组合，既简洁又能覆盖各种异常场景，让你的代码更稳定。

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