ReactJS中Uncaught in Promise (Axios Error)错误解决

根据你提供的代码和错误信息，注册失败主要由两个核心问题导致，以下是具体修复方案：

1. 表单数据未正确收集 #

你的Signup表单中，所有<TextField>都缺少name属性，导致onInputChange函数无法通过e.target.name正确更新signup状态对象，最终传给后端的注册数据是空的。

修复代码（Login.jsx）：

// 替换Signup部分的三个TextField
<TextField
  variant="filled"
  onChange={onInputChange}
  label="Enter Name"
  name="name" // 添加对应name属性
  value={signup.name} // 绑定状态值，保证双向同步
/>
<TextField
  variant="filled"
  onChange={onInputChange}
  label="Enter Username"
  name="username" // 添加对应name属性
  value={signup.username} // 绑定状态值
/>
<TextField
  variant="filled"
  onChange={onInputChange}
  label="Enter Password"
  name="password" // 添加对应name属性
  type="password" // 密码框设置type为password，提升安全性
  value={signup.password} // 绑定状态值
/>

2. 未处理API调用的Promise错误 #

你的API拦截器在处理错误时返回了Promise.reject(processError(error))，但signupUser函数没有用try/catch捕获这个错误，导致出现未捕获的Promise异常（也就是你遇到的错误）。

修复代码（Login.jsx）：

const signupUser = async () => {
  try {
    let response = await API.userSignup(signup);
    console.log(response);
    if (response.isSuccess) {
      showError('');
      setSignup(signupInitialValues);
      toggleAccount('login');
    } else {
      showError('Something went wrong! please try again later');
    }
  } catch (err) {
    // 捕获拦截器返回的错误信息
    showError(err.msg || 'Something went wrong! please try again later');
    console.error('注册错误详情:', err);
  }
};

额外优化建议 #

• 移除api.js中processError的async关键字：函数内没有使用await，无需标记为async：

const processError = (error) => {
  // 原逻辑保持不变
};

• 验证后端接口：确保http://localhost:8000/signup接口正常运行，支持POST请求并能正确解析JSON格式的请求体。
• 补全Login表单的属性：如果后续要实现登录功能，同样需要给Login区域的TextField添加name和value属性。

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