React注册表单提交报错，请求协助排查解决

1. handleInput 函数错误存储值为数组 #

你的handleInput函数把输入值存成了数组（[event.target.value]），但初始state是字符串类型，这会导致后续验证逻辑判断空值、长度全部失效。

修复代码：

const handleInput = (event) => {
  setValues((prev) => ({
    ...prev,
    [event.target.name]: event.target.value, // 去掉外层数组包裹
  }));
};

2. Validation 函数未返回错误对象 #

你的Validation函数定义了error对象，但最后没有返回，导致setErrors拿到的是undefined，无法正确触发验证逻辑。同时调整邮箱验证的判断顺序，先检查空值再验证格式：

修复代码：

export default function Validation(values){
    let error = {};
    const email_pattern = /^[a-zA-Z0-9]+@[a-zA-Z0-9]+\.[A-Za-z]+$/;
    const password_pattern = /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*])(?=.{8,})/;

    // 用户名验证
    if(values.username === ""){
        error.username = "Username is required";
    }else if (values.username.length < 3){
        error.username = "Username must be more than 3 characters";
    }else if (values.username.length > 15){
        error.username = "Username must be less than 15 characters";
    }

    // 邮箱验证：先判断空值，再验证格式
    if(values.email === ""){
        error.email = "Email is required";
    }else if (!email_pattern.test(values.email)){
        error.email = "Email is invalid";
    }

    // 密码验证
    if(values.password === ""){
        error.password = "Password is required";
    }else if (values.password.length < 6){
        error.password = "Password must be more than 6 characters";
    }else if (values.password.length > 15){
        error.password = "Password must be less than 15 characters";
    }else if(!password_pattern.test(values.password)){
        error.password = "Password must contain at least one uppercase, one lowercase, one number and one special character";
    }

    return error; // 必须返回错误对象
}

3. 后端 signup 接口参数传递错误 #

后端/signup接口中，db.query的第二个参数被错误地包裹了一层数组，导致SQL插入时参数不匹配，触发数据库错误。

修复代码：

app.post("/signup", (req, res) => {
  const sql = "INSERT INTO login (`username`,`email`, `password`) VALUES (?, ?, ?)";
  const values = [req.body.username, req.body.email, req.body.password];
  db.query(sql, values, (err, data) => { // 去掉values外层的[]
    if (err) {
      return res.json("Error");
    }
    return res.json(data);
  });
});

4. 前端 handleSubmit 逻辑异步延迟问题 #

setErrors是异步操作，设置后立刻判断Object.keys(errors).length会拿到旧值，需要先获取验证结果再判断；同时后端返回的是数据库操作对象，不是字符串"Success"，需调整判断逻辑：

修复代码：

const handleSubmit = (event) => {
  event.preventDefault();
  const validationErrors = Validation(values); // 先获取验证结果
  setErrors(validationErrors);
  if (Object.keys(validationErrors).length === 0) { // 直接用获取到的结果判断
    axios
      .post("http://localhost:3015/signup", values)
      .then((res) => {
        if (res.data.affectedRows > 0) { // 通过affectedRows判断插入成功
          navigate("/login");
        } else {
          alert("Signup failed");
        }
      })
      .catch((err) => console.log(err));
  }
};

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