web-dev-qa-db-ja.com

React Componentをロードするとき、gapiは定義されていません

Reactを使用してGoogleサインイン（ link ）を統合しようとしています。
これを過去に解決した質問が見つかりました Googleサインインボタンを反応2で使用しています

前述と同じ手順を繰り返しました。私のindex.htmlでは

<script src="https://apis.google.com/js/platform.js?onload=triggerGoogleLoaded" async defer></script>
    <script type="text/javascript">
        function triggerGoogleLoaded() {
            console.log("google event loaded");
            window.dispatchEvent(new Event('google-loaded'));
        }
    </script>

次に、Componentは次のようになります

var LoginButton = React.createClass({

    onSignIn: function(googleUser) {
        console.log("user signed in"); // plus any other logic here
    },

    renderGoogleLoginButton: function() {
        console.log('rendering google signin button');
        gapi.signin2.render('my-signin2', {
            'scope': 'https://www.googleapis.com/auth/plus.login',
            'width': 200,
            'height': 50,
            'longtitle': true,
            'theme': 'light',
            'onsuccess': this.onSignIn
        })
    },

    componentDidMount: function() {
        window.addEventListener('google-loaded',this.renderGoogleLoginButton);
    },

    render: function() {
        let displayText = "Sign in with Google";
        return (
            <div class="g-signin2" data-onsuccess="onSignIn"></div>
        );
    }

});

export default LoginButton;

yarn startを使用してプログラムを実行すると、

/Users/Harit.Himanshu/bl/sources/webs/google-login/src/LoginButton.js
  11:9   error    'gapi' is not defined                             no-undef
  26:13  warning  'displayText' is assigned a value but never used  no-unused-vars

✖ 2 problems (1 error, 1 warning)

完全なソースコードは https://github.com/hhimanshu/google-login-with-react で入手できます。

誰かが私の間違いを理解するのを手伝ってくれませんか？

ありがとう

javascriptreactjsgoogle-signin
13
daydreamer

Google APIをスクリプトタグとしてロードしているように見えますが、window.gapiをGoogle APIに設定すると予想されます。ただし、eslintまたは他のチェッカーを実行している場合、window.gapiが存在するはずであるということはわかりません。宣言されていない変数を使用していることがわかるため、失敗します。

簡単な解決策は、自分が何をしているか知っていることをEslintに伝えることです。

/* global gapi */

これをファイルの先頭に置くと、eslintはgapiを既知のグローバル変数として扱います。

13
Steve Cooper

これでうまくいきました。それをcomponentDidMountまたはコンストラクタに入れます：

componentDidMount() {
    window.gapi.load('auth2', () => {
        // Retrieve the singleton for the GoogleAuth library and set up the client.
        this.auth2 = window.gapi.auth2.init({
            client_id: '436676563344-.apps.googleusercontent.com',
            cookiepolicy: 'single_Host_Origin',
        });

        this.auth2.attachClickHandler(this.refs.googleButton, {},
            (googleUser) => {
                this.googleLogin(googleUser.getBasicProfile());
            }, (error) => {

            });
    });
}
4
Giang Le

Window.gapi.someMethod（）とスクリプトの読み込みの間で競合状態が発生する非同期遅延を使用していないことを確認してください

つまり、index.htmlのスクリプトタグからasync deferを削除します。

前

<script src="https://apis.google.com/js/platform.js?onload=triggerGoogleLoaded" async defer></script>

後

<script src="https://apis.google.com/js/platform.js?onload=triggerGoogleLoaded"></script>
0
Yang

また、パッケージ gapi-script を試すこともできます。このパッケージはすぐにギャップを提供するため、スクリプトが読み込まれるのを待つ必要はありません。インポートして使用するだけです。

import { gapi } from 'gapi-script';
0
Lucas Andrade