"Uncaught (in promise): null" 提升 reCAPTCHA 值时

Question

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

Uncaught (in promise): 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 的s/React 应用程序中绕过它。

Answer 1

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

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>;
};