Reactjs handleSubmit（）上的值在控制台日志中显示为未定义

同样的代码在前一台机器中运行良好

现在由于某种原因，console中的值（在handleSubmit（）中）显示电子邮件、全名和密码未定义，然后到达catch块，表示出现了问题！救命啊。 我有一份报名表：

export default function MerchantCreateAccountForm() {

其中定义了电子邮件、密码和名称等常量：

 // set error messages to display to the user
  const [nameError, setNameError] = useState(null);
  const [emailError, setEmailError] = useState(null);
  const [passwordError, setPasswordError] = useState(null);

  // set initial state value(s)
  const [fullName, setFullName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const [errors, setErrors] = useState({});

  const authContext = useContext(AuthContext);

主要是，需要帮助，以获取handleSubmit（）中电子邮件、全名和密码的未定义值。 后来，它到达捕捉块（出了问题），但这可能是另一个问题

下面是函数：

  const handleSubmit = (e) => {

    try {
      e.preventDefault();
console.log("email is: " +email); //showing undefined in console. HELP
console.log("name is: "+fullName); //showing undefined in console. HELP
console.log("password is: "+password); //showing undefined in console. HELP
      const merchantSignupData =
      {
        data:
        {
          name: fullName,
          email: email,
          password: password,
          client_id: 'testclient',
          client_secret: 'testpass'
        },
        type: 'POST',
        url: 'merchant-signup',
        success: authContext.merchantSignupSuccess,
        error: authContext.networkError
      };
      merchantSignupObject.fullName, merchantSignupObject.password);
      authContext.merchantSignup(merchantSignupData);
    }
    catch{
      console.log("something went wrong!");
      //need to add error handling here
    }

  }

虽然我在这里使用了验证，但效果很好，以防万一这可能会妨碍数据的设置：

  // for every change in our state this will be fired
  // we add validation here and disable the save button if required
  useEffect(() => {

    // we want to skip validation on first render
    if (firstRender.current) {
      firstRender.current = false
      return
    }

    // here we can disable/enable the save button by wrapping the setState function
    // in a call to the validation function which returns true/false
    //setDisabled(formValidation())
    formValidation();
  }, [fullName, password]) // any state variable(s) included in here will trigger the effect to run

  // here we run any validation, returning true/false
  const formValidation = () => {
    let newErrors = {}
    var error = false;

    if (fullName === "") {
      newErrors.fullName = 'Name cant be blank!'
    }
    if (email === "") {
      newErrors.email = 'Email cant be blank!'
    }
    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(errors.name)
    setEmailError(errors.email)
    setPasswordError(errors.password)
    

    if (errors != null) {
      //alert("reached")
      setErrors(newErrors);
      // $("#signup-submit").addremoveAttr("disabled") 
    }

    else {
      alert("reached here")
      setNameError(errors.fullName)
      setEmailError(errors.email)
      setPasswordError(errors.password)
      //  $("#signup-submit").removeAttr("disabled") 
    }
  }

  const showError = () => {
    alert('error!');
  }

这是我的主要表格：

 return (
    <form onSubmit={handleSubmit()}>

      <div className="row">
        <div className="col-md-4 col-sm-6 col-xs-12">
          <div className="signup">
            <h3>{lang.merchant_signup_create_account}</h3>
            <p>{lang.merchant_signup_account_already}<a href="/linktologinpagecomponentlatertodo">{lang.merchant_signup_sign_in}</a></p>
            <div className="form-group has-error">
              <input type="text" required="required" name="fullName"
                value={fullName}
                placeholder={lang.merchant_signup_name_placeholder}
                onChange={e => setFullName(e.target.value)} />
              <label htmlFor="input" className="control-label">{lang.merchant_signup_name}</label>
              <i className="bar"></i>
              <div className="error">
                <div className="error-msg" role="alert">
                  {errors.fullName && <p>{errors.fullName}</p>}
                </div>
              </div>
            </div>
            <div className="form-group">
              <input type="text" required="required"
                placeholder={lang.merchant_signup_email_placeholder} onChange={e => setEmail(e.target.value)} />
              <label htmlFor="E-mail" className="control-label">{lang.merchant_signup_email}</label><i className="bar"></i>
              <div className="error">
                <div className="error-msg" role="alert">
                  {errors.email && <p>{errors.email}</p>}
                </div>
              </div>
            </div>
            <div className="form-group">
              <input type="password" required="required" placeholder={lang.merchant_signup_password_placeholder} onChange={e => setPassword(e.target.value)} />
              <label htmlFor="Password" className="control-label">{lang.merchant_signup_password}</label><i className="bar"></i>
              <div className="error">
                <div className="error-msg" role="alert">
                  {errors.password && <p>{errors.password}</p>}
                </div>
              </div>
              <ul className="p-suggest">
                <li> {lang.merchant_signup_password_validation1}</li>
                <li>{lang.merchant_signup_password_validation2}</li>
              </ul>
              <ul className="p-suggest">
                <li>{lang.merchant_signup_password_validation3}</li>
                <li>{lang.merchant_signup_password_validation4}</li>
              </ul>
            </div>
            <p>{lang.merchant_signup_create_terms_warning}<a target="_blank" href="#">{lang.merchant_terms_condition}</a>.</p>
          </div>
          <ul className="list-inline">
            {/* onClick={() => handleSubmit()} */},
              <li><button type="submit" id="signup-submit" className="btn btn-danger create-account next-step">{lang.merchant_signup_create_account_btn}</button></li>
          </ul>
        </div>
        <div className="col-md-8 col-sm-6 col-xs-12">
          <img className="img-responsive" src={storeImg} />
        </div>
      </div>

    </form>
  )
}

返回(
{lang.merchant\注册\创建\帐户}
{lang.merchant\u已注册\u帐户\u}

setFullName（e.target.value）}/>
{lang.merchant\u signup\u name}
{errors.fullName&&{errors.fullName}
}
setEmail（e.target.value）}/>
{lang.merchant_注册_电子邮件}
{errors.email&{errors.email}
}
setPassword（e.target.value）}/>
{lang.merchant_注册_密码}
{errors.password&&{errors.password}
}

{lang.merchant\注册\密码\验证1}
{lang.merchant\注册\密码\验证2}


{lang.merchant\注册\密码\验证3}
{lang.merchant\注册\密码\验证4}

{lang.merchant\注册\创建\条款\警告}


{/*onClick={（）=>handleSubmit（）}*/}，
{lang.merchant\注册\创建\帐户\u btn}

)
}

如您所见

确保将函数传递给组件时未调用该函数：

因此，将表单

onSubmit

方法调用更改为

<form onSubmit={handleSubmit}>

或

handleSubmit（）}>

回到基础，愚蠢的解决方案： 每个输入中都缺少属性值，因此该值将被视为未定义的值，如下所示：

 <input value={password} type="password" required="required" placeholder={lang.merchant_signup_password_placeholder} onChange={e => setPassword(e.target.value)} />

setPassword（e.target.value）}/>

函数submit中的括号不匹配，正在调用handleSubmit（）方法！这不是问题。这就是为什么要访问该方法的控制台日志。上面的更改仍然显示未定义的值。@sakshinarang您不应该直接调用该方法。这

是错误的。然后，如果输入用键入的值更新，我无法理解什么是错误的。我们需要一把小提琴来测试它。我想不出别的了。是的，它在以前的机器里工作，应该工作的。不知道为什么不是。代码看起来正确（除了您突出显示的内容，尽管它仍在该函数中运行）仍然不起作用。是的，但是

fullName

已经定义了value属性，这是我检查的第一件事（但是我没有检查其他内容，因为您说所有内容都未定义）。同意！您的解决方案解决了一半的问题（主要问题）

 <input value={password} type="password" required="required" placeholder={lang.merchant_signup_password_placeholder} onChange={e => setPassword(e.target.value)} />