使用 emailjs 重新捕获后控制台出现“未捕获（在承诺中）TypeError”错误

Question

这个有点奇怪，所以我会尽力总结一下。

我正在创建一个 React 应用程序，并且正在实施 emailjs 来提交表单数据。 我将其设置为使用 recaptcha，表单过程是填写表单->单击提交按钮->提交 recaptcha ->表单提交。

这看起来很简单，但是当 recaptcha 提交时，我得到了Uncaught (in promise) TypeError控制台错误。 根据我的经验，这通常带有警告和堆栈跟踪，例如Uncaught (in promise) TypeError: Object is not iterable或类似的东西，但这不会提供任何信息。 它说它源自 anchor: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>) }
      </>
  );
}

我当然审查了密钥，但如果我遗漏了任何内容，我也会很感激提醒。

Answer 1

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