2016-07-28 17 views
0

私はreact/reduxプロジェクトにreact-recaptchaを正常に実装しました。ほとんどの状況で動作します。たとえば、ユーザーが別のルートからサインアップページに移動すると、完全に読み込まれます。ただし、ユーザーがそれに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' /> 
... 

任意のアイデア?

答えて

0

async deferにrecaptchaスクリプトファイルがロードされているので、<Recaptcha />が起動してからhttps://www.google.com/recaptcha/api.jsがダウンロードされると問題が発生する可能性があります。サインアップページで発生します。サインアップ以外のページからナビゲートすると、スクリプトは準備完了となり、<Recaptcha />はうまく動作します。

あなたは2つのオプションがあります:

  1. async deferを削除 - お勧めしません。
  2. https://www.google.com/recaptcha/api.jsが準備完了のときにコールバックを処理し、<Recaptcha />のみを登録します。
関連する問題