React JSX注册表单验证异常及TypeError报错求助

报错的核心是提交按钮同时绑定了onClick和表单的onSubmit：点击按钮时，onClick里调用handleFormSubmit(e)传入的是按钮点击事件的event对象，而非表单提交事件的event。此时e.target是提交按钮本身，不是表单元素，自然找不到e.target.email、e.target.name这些表单控件，所以抛出「Cannot read properties of undefined (reading 'value')」错误。

另外还有两处逻辑漏洞：

• user对象在组件渲染时就被创建，不会随state更新，导致传给signup的始终是初始的null值
• 验证逻辑依赖e.target获取值，不如直接用组件内部维护的state更可靠

1. 移除提交按钮的onClick事件，统一用表单onSubmit处理逻辑 #

把signup调用移到handleFormSubmit里，确保触发的是表单提交事件，e.target指向表单元素。

修改前的提交按钮：

<input type="submit" value="SIGN IN" className="signInButton" onClick={(e) => {
  e.preventDefault();
  signup(user);
  handleFormSubmit(e);
}}/>

修改后：

<input type="submit" value="SIGN IN" className="signInButton"/>

2. 重构handleFormSubmit逻辑 #

直接用组件内的state做验证，同时在函数内部创建最新的user对象：

const handleFormSubmit = (e) => {
  e.preventDefault();

  // 用state直接判断空字段
  setNameEmpty(!name);
  setEmailEmpty(!email);
  setPasswordEmpty(!password);
  setconfirmPasswordEmpty(!cpass);

  // 只有所有字段都不为空时，才调用接口
  if (name && email && password && cpass) {
    const user = { name, email, password, cpass };
    signup(user);
  }
};

3. 修复signup接口的请求格式 #

手动JSON.stringify会导致请求格式问题，axios会自动序列化JSON，直接传对象即可，同时确保请求头正确：

async function signup(user) {
  console.log("sono dentro la funzione");
  try {
    return await axios.post("http://localhost:3000/signup", user, {
      headers: {
        "Content-Type": "application/json"
      }
    });
  } catch (err) {
    if (err.response) {
      return err.response.data;
    } else {
      console.log("Errore:", err.message);
    }
  }
};

4. 可选优化：统一state初始值 #

把表单字段的初始值从null改为空字符串""，更符合输入框的默认状态：

const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [cpass, setCpass] = useState("");

function RegisterPage() {
  // ... 其他state保持不变
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [cpass, setCpass] = useState("");

  const handleFormSubmit = (e) => {
    e.preventDefault();

    setNameEmpty(!name);
    setEmailEmpty(!email);
    setPasswordEmpty(!password);
    setconfirmPasswordEmpty(!cpass);

    if (name && email && password && cpass) {
      const user = { name, email, password, cpass };
      signup(user);
    }
  };

  // ... 其他函数保持不变

  return (
    <div className="backgroundRegister">
      {/* ... 其他元素保持不变 */}
      <form className="formRegister" onSubmit={handleFormSubmit}>
        {/* ... 各个输入框保持不变 */}
        <input type="submit" value="SIGN IN" className="signInButton"/>
      </form>
      {/* ... 其他元素保持不变 */}
    </div>
  );
}

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