React出现Unhandled Rejection报错：无法读取undefined的'data'属性

• 报错核心是你在catch代码块中直接访问了error.response.data，但不是所有进入catch的错误对象都存在response属性：
  1. 当表单校验通过、注册接口请求成功后，你执行的push('/login')路由跳转操作如果抛出异常，这个异常不属于接口请求类错误，不会自带response属性，此时error.response为undefined，读取undefined的data属性就会触发该类型错误
  2. 就算是接口请求类错误，遇到网络超时、请求跨域被拦截、断网等场景时，错误对象同样不会携带response属性，也会触发相同报错
• 之前只有接口返回校验错误的场景能正常运行，是因为这类错误确实带了完整的response.data结构，其他异常场景都没有做兼容处理。

使用可选链操作符逐层判断属性是否存在，避免读取undefined的属性：

try {
  const response =  await signup(body);
  push('/login');
} catch (error){
  // 先逐层判断属性是否存在，再执行赋值逻辑
  if (error?.response?.data?.validationErrors) {
    setErrors(error.response.data.validationErrors);
  }
  // 若需要处理其他类型错误，可在此处补充额外逻辑，比如全局提示网络异常
}

如果你的运行环境不支持可选链语法，就用逐层判断的写法：

try {
  const response =  await signup(body);
  push('/login');
} catch (error){
  if (error.response && error.response.data && error.response.data.validationErrors) {
    setErrors(error.response.data.validationErrors);
  }
}

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