react-recaptha - grecaptcha未定义

2016-07-28 200 views 0 likes

我已经在我的react/redux项目中成功实施了react-recaptcha，它在大多数情况下都能正常工作。例如，当用户从另一条路线导航到我的注册页面时，它会完美加载。但是，当用户刷新注册页面，上面有验证码，3/4的时候，我得到：
grecaptcha is not definedreact-recaptha - grecaptcha未定义

我认为这是竞争状态，因为当我在本地工作，我没有得到这个错误。以下是我有我的代码设置：

的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' /> 
...

任何想法？

来源

2016-07-28 bmills

回答

由于您的recaptcha脚本文件是以async defer的方式加载的，因此在<Recaptcha />下载https://www.google.com/recaptcha/api.js之前触发时会出现问题。它发生在注册页面上。如果你从其他页面导航而不是注册，你的脚本将准备好，并且<Recaptcha />将正常工作。

你有2种选择：

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

来源

2016-07-28 09:55:37 Everettss

react-recaptha - grecaptcha未定义

回答

相关问题