React+Axios注册请求400错误：Postman正常客户端失败

问题根源分析 #

1. 字段映射不匹配：注册页面的手机号输入框name属性为phone_number，但在registerUser方法中错误地从registerData.phone取值，导致后端接收不到必填的phone字段，触发400请求错误。
2. 初始表单数据缺失关键字段：useCustomForm的初始表单对象未包含password键，虽然后续输入会赋值，但可能导致表单提交时字段初始化异常。

修复步骤 #

1. 修正AuthContext中的字段映射

修改registerUser方法里的finalData对象，将手机号字段的取值来源改为phone_number：

const registerUser = async (registerData) => {
  try {
    const finalData = {
      username: registerData.username,
      password: registerData.password,
      email: registerData.email,
      first_name: registerData.firstName,
      last_name: registerData.lastName,
      address: registerData.address,
      phone: registerData.phone_number, // 修正此处的字段映射
    };
    const response = await axios.post(`${BASE_URL}/register`, finalData);
    if (response.status === 201) {
      console.log("Successful registration! Log in to access token");
      setIsServerError(false);
      navigate("/login");
    } else {
      setIsServerError(true);
      console.log("Registration failed.");
    }
  } catch (error) {
    setIsServerError(true);
    // 打印完整错误详情，便于排查后端返回的具体验证失败原因
    console.error("Registration error details:", error.response);
  }
};

2. 补充RegisterPage的初始表单字段

在useCustomForm的初始对象中添加password字段：

const [formData, handleInputChange, handleSubmit, reset] = useCustomForm(
  {
    firstName: "",
    lastName: "",
    username: "",
    email: "",
    password: "", // 补充password初始字段
    address: "",
    phone_number: ""
  },
  registerUser
);

完成以上修改后，React客户端提交的注册数据将与Postman测试时的字段结构完全匹配，即可正常调用注册接口。

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