这个有点怪,我会尽量总结好的。
我正在创建一个react应用程序,我正在实现emailjs来提交表单数据,我设置它使用recaptcha,表单过程是填写表单-〉点击提交按钮-〉提交recaptcha-〉表单提交。
这看起来很简单,但是当recaptcha提交时,我得到了Uncaught (in promise) TypeError
控制台错误。根据我的经验,这通常会伴随一个警告和一个堆栈跟踪,类似于Uncaught (in promise) TypeError: Object is not iterable
或类似的东西,但这没有给予任何信息。它说它源自锚:1,但当我点击它查看文件时,它没有带我到文件,只是切换不存在的堆栈跟踪。
我已经花了一些时间四处看看,但我没有看到任何其他人有这样的错误,因为每一个其他我看到的后续信息正确。
我将粘贴下面的代码,如果有人能给予一些指导,我会很感激。
export function Form(){
const form = useRef();
const [formData, setFormData] = useState({
'fname': '',
'lname': '',
'email': '',
'message': '',
});
const[captcha, showCaptcha] = useState(false);
const submitForm = (e) => {
e.preventDefault();
showCaptcha(true);
}
const handleChange = (e) => {
setFormData({...formData, [e.target.name]: e.target.value});
};
const sendEmail = (e, captchaValue) => {
e.preventDefault();
const params = {
'g-recaptcha-response': captchaValue,
formData
};
emailjs.send('service_id', 'template_id', params, 'public_key')
.then((result) => {
console.log(result.text);
e.target.reset();
}, (error) => {
console.log(params);
console.log(error);
});
};
return(
<>
<form className="d-flex flex-column" ref={form} onSubmit={submitForm}>
<label htmlFor="fname">First Name:</label>
<input type="text" id="fname" name="fname" onChange={handleChange} />
<label htmlFor="lname">Last Name:</label>
<input type="text" id="lname" name="lname" onChange={handleChange} />
<label htmlFor="email">Email:</label>
<input type="text" id="email" name="email" onChange={handleChange} />
<label htmlFor="message">Message</label>
<textarea name="message" rows="20" cols="30" onChange={handleChange} ></textarea>
<fieldset className="d-flex flex-row mt-3">
<input type="submit" className="mx-2" />
<input type="reset" className="mx-2" />
</fieldset>
</form>
{!captcha ? (<></>) : (<div className="px-3 mt-3"><ReCAPTCHA theme='dark' sitekey='sitekey' onChange={sendEmail}/></div>) }
</>
);
}
我审查的关键,当然,但如果我错过了什么,我也希望一个提示。
1条答案
按热度按时间gdrx4gfi1#
当您在不支持的域上加载Recaptcha时,将收到此错误。您可以在此处添加域或管理密钥:https://www.google.com/recaptcha/admin