Formik 表单未提交和 reCAPTCHA 错误消息不断弹出

如何解决Formik 表单未提交和 reCAPTCHA 错误消息不断弹出

我正在做这个项目。在我添加 React reCAPTCHA 之前，表单可以正常工作，但是现在，表单没有提交，并且 reCAPTCHA 在被检查并点击提交按钮后一直显示错误消息。

代码如下：

 

    const validationSchema = yup.object().shape({
        name: yup.string().required('Your name is required.'),email: yup.string().email('Please enter a valid email address.').required('Email is required'),comment: yup.string().required('No comment entered yet.'),recaptcha: yup.string().required('Confirm that you are human.'),});
    
      const {
        'article-comment-name': name,'article-comment-email': email,'article-comment-comment': commentInput,'article-comment-submit': submit,} = keyBy(commentForm?.form?.inputs,KEY);
      return (
        <div>
          <p className="text text-success text-center">{msg && <p>Your comment has been added.</p>}</p>
          <Formik
            initialValues={formInitialValues}
            onSubmit={(comment,{ resetForm }) => {
              handLeverify();
              submitComment(comment);
              resetForm();
              commentCreated();
            }}
            validationSchema={validationSchema}
          >
            {({ values: comment,handleChange,handleSubmit,errors,touched }) => (
              <form id="add-comment" className="add-comment" onSubmit={handleSubmit}>
                <fieldset>
                  <div className="row">
                    <div className="col-md-6">
                      <label>
                        {name.label}:{' '}
                        <span className="text-danger">
                          {errors.name && touched.name && errors.name}
                        </span>
                      </label>
                      <input type="text" name="name" value={comment.name} onChange={handleChange} />
                    </div>
                    <div className="col-md-6">
                      <label>
                        {email.label}:{' '}
                        <span className="text-danger">
                          {errors.email && touched.email && errors.email}
                        </span>
                      </label>
    
                      <input type="text" name="email" value={comment.email} onChange={handleChange} />
                    </div>
                  </div>
                  <div>
                    <label>
                      {commentInput.label}:{' '}
                      <span className="text-danger">
                        {errors.comment && touched.comment && errors.comment}
                      </span>
                    </label>
                    <textarea
                      name="comment"
                      cols={40}
                      rows={3}
                      value={comment.comment}
                      onChange={handleChange}
                    ></textarea>
                  </div>
                  <Recaptcha
                    sitekey="mysitekey"
                    verifyCallback={handLeverify}
                    render="explicit"
                  />
                  <span className="text-danger">{verify && touched.recaptcha && errors.recaptcha}</span>
                </fieldset>
                <br />
                <button type="submit" className="theme-btn">
                  <span>{submit.label}</span>
                </button>
                <div className="clearfix"></div>
              </form>
            )}
          </Formik>
        </div>

我已经检查了回调，它在这方面工作正常。主要问题是表单未提交。它一直显示此消息，如下所述：Confirm that you are human.

可能是什么问题？

解决方法

在 Formik 设置中，值或错误都与 name 属性绑定。元素的 name 属性应该与带有 values 的键之一匹配。您有 recaptcha 的验证架构，但它与您的 Recaptcha 组件无关。

 <Recaptcha
     sitekey="mysitekey"
     verifyCallback={handleVerify}
     render="explicit"
  />

在 formik 中提交会触发一系列事件。请阅读此Formik Form Submission