reactjs 使用emailjs重新捕获后,控制台中出现“未捕获(承诺中)TypeError”错误

yftpprvb  于 2023-01-04  发布在  React
关注(0)|答案(1)|浏览(166)

这个有点怪,我会尽量总结好的。
我正在创建一个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>) }
      </>
  );
}

我审查的关键,当然,但如果我错过了什么,我也希望一个提示。

gdrx4gfi

gdrx4gfi1#

当您在不支持的域上加载Recaptcha时,将收到此错误。您可以在此处添加域或管理密钥:https://www.google.com/recaptcha/admin

相关问题