加载 React 组件时未定义 gapi

Posted 2023-02-23

【中文标题】加载 React 组件时未定义 gapi

【英文标题】：gapi is not defined when loading React Component

【发布时间】：2017-09-30 18:28:50

【问题描述】：

我正在尝试使用 React 集成 Google 登录 (link)。 我发现一个问题过去解决了这个问题Using google sign in button with react 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获得

有人可以帮我理解我的错误吗？

谢谢

【参考方案1】：

在我看来，您正在将 google apis 作为脚本标签加载，我们希望将 window.gapi 设置为 google api。但是，您随后正在运行 eslint 或其他一些检查器，并且不知道应该存在 window.gapi。它失败了，因为它看到你使用了一个未声明的变量。

一个便宜的解决办法是告诉 Eslint 你知道你在做什么；

/* global gapi */

把它放在文件的顶部，eslint 会将gapi 视为已知的全局变量。

【讨论】：

感谢@steve，这帮助我获得了按钮，现在我被***.com/questions/43767485/… 卡住了，你知道我在哪里犯错了吗？

【参考方案2】：

这对我有用。放到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) => 

            );
    );

【讨论】：

我仍然收到 OP 的错误 (Uncaught ReferenceError: gapi is not defined)。您是否在某个地方定义了 gapi？

你是否把 放在你的脚本之前？

你知道我怎样才能让 gapi 与 react-native 一起工作吗？

@Bomber 抱歉，但我不知道 :(

【参考方案3】：

你也可以试试gapi-script这个包，这个包即时提供gapi，所以你不用等待任何脚本加载，直接导入使用：

import  gapi  from 'gapi-script';

【讨论】：

不是一个好的解决方案，因为 gapi 脚本是由 Google 动态更新的，而这只是脚本的硬拷贝。您最终可能会得到一个过时的脚本版本，您的应用程序可能会停止工作。

是的，我同意你的观点，我不推荐这个包用于公司和企业项目，只推荐给小项目学习等。

包已更新，现在有一个功能可以从google的链接下载和使用真正的脚本。

【参考方案4】：

确保您没有使用异步延迟，这将导致 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>

【参考方案5】：

我有一个类似的问题。

我使用 'react-snap' 进行 SEO。它阻止我使用“gapi”。我找到了 navigator.userAgent 'ReactSnap'。

if (navigator.userAgent !== 'ReactSnap') 
    // some code to dynamically load a script
    let myScript = document.createElement('script')
    myScript.setAttribute('src', 'https://apis.google.com/js/platform.js')
    document.body.appendChild(myScript)

我解决了一个问题。 效果很好。