MERN应用实现登录功能时报Cannot read 'data' of undefined如何修复

错误原因 #

• 异步逻辑处理异常：loginHandler 声明了async关键字但没有配合await使用异步请求，外层try/catch无法捕获Promise链式调用抛出的异常，最终拿到的error对象不符合预期，error.response为undefined，读取error.response.data时触发报错。
• 路由跳转时机错误：调用AuthService.loginUser后未等待请求返回就直接执行history.push('/')，会出现登录状态还没写入本地存储就跳转到首页的逻辑缺陷。

修复代码 #

直接修改LoginScreen.jsx中的loginHandler函数，正确使用async/await处理异步逻辑：

const loginHandler = async e => {
  e.preventDefault();

  try {
    const data = { email, password };
    // 新增await等待请求返回
    const response = await AuthService.loginUser(data);
    localStorage.setItem('authToken', response.data.token);
    // 登录成功后再跳转路由
    history.push('/');
  } catch (error) {
    // 新增判断，避免网络错误等场景下error.response不存在仍报错
    const errMsg = error.response?.data?.error || '登录失败，请稍后重试';
    setError(errMsg);

    setTimeout(() => {
      setError('');
    }, 5000);
  }
};

验证逻辑 #

修改完成后测试登录流程：

1. 输入正确的账号密码，请求成功后会自动写入token并跳转到首页
2. 输入错误的账号密码或网络异常时，错误会被正常捕获并展示提示，不会抛出控制台异常

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