Question

我已经在react / redux项目中成功实现了react-recaptcha，它适用于大多数情况。例如，当用户从另一条路线导航到我的注册页面时，它会完美加载。但是，当用户使用recaptcha刷新注册页面时，我得到3/4次：
grecaptcha is not defined

我认为这是竞争条件，因为当我在本地工作时，我没有收到此错误。以下是我设置代码的方法：

的index.html

<head>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
</head>

Signup.jsx

...
<Recaptcha {...captcha} sitekey='xxx-xxx-xxx'  
     render = 'explicit'  
     verifyCallback={this.verifyCallback}  
     data-size="compact"  
     onloadCallback={this.captchaLoadCallback}  
     style={this.captchaStyle}  
     size='small' />  
...

有什么想法吗？

Answer 1

由于您的recaptcha脚本文件以async defer方式加载，因此在<Recaptcha />下载https://www.google.com/recaptcha/api.js之前，您的问题可能会发生。它发生在注册页面上。如果您从其他页面导航而非注册，则您的脚本将准备就绪，<Recaptcha />将正常工作。

您有两个选择：

删除async defer - 不推荐。
https://www.google.com/recaptcha/api.js准备好后处理回调，只注册<Recaptcha />。

react-recaptha - grecaptcha未定义

1 个答案: