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

Question

我正在处理这个项目。在我添加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.

可能是什么问题？

Answer 1

在Formik设置中，值或错误都与name道具绑定。元素的name属性应该与具有values的键之一匹配。您有recaptcha的validationSchema，但它与Recaptcha组件没有关联。

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

formik中的提交会触发一系列事件。请阅读此Formik表格提交