提升 reCAPTCHA 的值时“未捕获（承诺中）：null”答案

【问题标题】："Uncaught (in promise): null" when lifting up the value of reCAPTCHA提升 reCAPTCHA 的值时“未捕获（承诺中）：null”
【发布时间】：2020-07-25 18:50:04
【问题描述】：

一旦用户单击它，我就会尝试提升 reCAPTCHA（使用react-google-recaptcha）的值。我可以轻松获取该值，但无法将其发送到父组件。它抛出：

未捕获（承诺）：null

const RecaptchaInput = ({ name, isValid, errorMessage, onChange }) => {
  const recaptchaReference = useRef(null);

  const handleChange = () => {
    let recaptchaValue = recaptchaReference.current.getValue(); 
    console.log('recaptchaValue',recaptchaValue) //prompts the value

    onChange({ value: recaptchaValue, name: `recaptcha` });
  };

  return <div>
    <label htmlFor={name}>
      <Recaptcha sitekey={process.env.GATSBY_SITE_RECAPTCHA_KEY}
                 ref={recaptchaReference}
                 onChange={handleChange} />
    </label>
    {!isValid && <small>{errorMessage}</small>}
  </div>;
};

该值已在控制台中正确提示，但我无法发送它onChange 函数。既不是像 {value: 'hello', name: 'recaptcha'} 这样的虚拟对象。

我的onChange 函数将参数解构为name 和value，这就是我举起这样一个对象的原因。

据我阅读，这似乎与 Google 的 Recaptcha 回调有关，但我不知道如何在 Gatsby 的/React 应用程序中绕过它。

【问题讨论】：

标签： javascript reactjs gatsby netlify react-google-recaptcha

【解决方案1】：

经过数小时的反复试验，我通过进行基于 async 承诺的值获取来修复它。对于可能陷入类似问题的每个人：

const RecaptchaInput = ({ name, isValid, errorMessage, onChange }) => {
  const recaptchaReference = useRef(null);

  const handleChange = async () => {
    let recaptchaValue = recaptchaReference.current.getValue(); 
    console.log('recaptchaValue',recaptchaValue) //prompts the value

    onChange({ value: recaptchaValue, name: `recaptcha` });
  };

  return <div>
    <label htmlFor={name}>
      <Recaptcha sitekey={process.env.GATSBY_SITE_RECAPTCHA_KEY}
                 ref={recaptchaReference}
                 onChange={handleChange} />
    </label>
    {!isValid && <small>{errorMessage}</small>}
  </div>;
};

【讨论】：