使用 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