"未捕获(承诺)：空"，当提升 reCAPTCHA 的价值

Question

我试图在用户点击reCAPTCHA(使用react google repatcha(后提高它的值。我可以很容易地获得值，但无法将其发送到父组件。它抛出：

未捕获(承诺中(：空

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，这就是我提起这样一个对象的原因。

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

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