react-recaptha - grecaptcha 未定义答案

【问题标题】：react-recaptha - grecaptcha is not definedreact-recaptha - grecaptcha 未定义
【发布时间】：2016-12-02 07:52:02
【问题描述】：

我已经在我的 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' />  
...

有什么想法吗？

【问题讨论】：

标签： reactjs webpack react-router recaptcha

【解决方案1】：

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

你有两个选择：

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

【讨论】：