React商户注册表单handleSubmit中状态值undefined问题求助

我来帮你一步步揪出问题根源并搞定它：

1. 表单提交事件绑定错误（核心问题） #

你在form标签里写的是：

<form onSubmit={handleSubmit()}>

这会导致组件一渲染就立刻执行handleSubmit函数，而不是等用户点击提交按钮才触发。此时组件刚初始化，后续用户输入的内容还没同步到状态里，再加上这种错误绑定会导致函数执行上下文异常，最终就出现了打印undefined的情况。

修复方式：去掉括号，把函数引用传给onSubmit：

<form onSubmit={handleSubmit}>

2. Email输入框缺少双向绑定 #

看你的email输入框代码：

<input type="text" required="required" placeholder={lang.merchant_signup_email_placeholder} onChange={e => setEmail(e.target.value)} />

这里没加value={email}，导致输入框的值和你的email状态没法双向绑定——用户输入的内容不会同步到state里，状态始终保持异常，最终也会出现undefined的情况。

修复方式：补上value绑定：

<input type="text" required="required" placeholder={lang.merchant_signup_email_placeholder} value={email} onChange={e => setEmail(e.target.value)} />

3. handleSubmit函数中的语法错误 #

你在handleSubmit里有一行完全无效的代码：

merchantSignupObject.fullName, merchantSignupObject.password);

这行代码没有函数调用前缀，属于语法错误，会直接抛出异常让代码进入catch块，打印"something went wrong!"。

修复方式：删掉这行无意义的代码，或者补充完整的函数调用（如果这是你不小心遗漏的代码）。

4. 表单验证逻辑的小优化（可选） #

你的formValidation函数里还有几处逻辑小问题：

• setNameError(errors.name) 应该改成setNameError(newErrors.fullName)，因为errors是旧状态，得用刚验证出来的newErrors值
• 判断if (errors != null)的逻辑不对，应该检查newErrors是否为空对象来决定错误状态

优化后的formValidation示例：

const formValidation = () => {
  let newErrors = {};
  if (fullName === "") {
    newErrors.fullName = 'Name cant be blank!';
  }
  if (email === "") {
    newErrors.email = 'Email cant be blank!';
  } else if (!(/.+@.+\.[A-Za-z]+$/.test(email))) {
    newErrors.email = 'Enter a valid email id';
  }
  if (!(/(?=.{7,255}$)(?=.*[A-Z])(?=.*[a-z])(?=.*\d)/.test(password))) {
    newErrors.password = 'Invalid Password Format';
  }
  // 更新错误提示状态
  setNameError(newErrors.fullName || null);
  setEmailError(newErrors.email || null);
  setPasswordError(newErrors.password || null);
  setErrors(newErrors);
  // 返回是否验证通过
  return Object.keys(newErrors).length === 0;
};

先修复前三个核心问题，你的handleSubmit里应该就能正确打印出email、fullName和password的值了，catch块的问题也会跟着解决。

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