javascript - 当我刷新时，Google 签名按钮消失 - React

Question

登录按钮仅在服务器启动时起作用，但是一旦我在浏览器上刷新，登录按钮就消失了，并且显示此错误消息:

Error picture

当我在控制台中使用 Firefox 时，它说 window.gapi 未定义

我不确定为什么会发生这个错误，如果您能提供帮助，我将不胜感激:) 谢谢。

Uncaught TypeError: Cannot read property 'signin2' of undefined
    at App.renderGoogleSignInButton (index_bundle.js:32253)
    at App.componentDidMount (index_bundle.js:32216)

这是我的 react 代码:

import React, { Component } from 'react';

export default class App extends Component {
constructor(props){
  super(props)
 this.signOut = this.signOut.bind(this)
}
componentDidMount() {
    window.addEventListener('google-auth-loaded',
    this.renderGoogleSignInButton());


}

signOut() {
var auth2 = window.gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
  console.log('User signed out.');
});


}

onSignIn(googleUser) {

   var auth2 = window.gapi.auth2.getAuthInstance();

    console.log(googleUser.getAuthResponse().id_token)
    var profile = googleUser.getBasicProfile();
    console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
  }

renderGoogleSignInButton() {
    window.gapi.signin2.render('my-signin2', {
      'scope': 'email',
        'theme': 'light',
        'longtitle': true,
        'onsuccess': this.onSignIn,
        'onfailure': this.onSignInFailure
    });
}


onSignInFailure(error) {
    console.error(error);
}

render() {
    return (
        <div>
        <button onClick={this.signOut}>logout</button>            
        <div id='my-signin2'></div>
        </div>
    );
  }
}

<小时/>

我的html:)

<meta name="google-signin-client_id" xxxxxxxxxx.apps.googleusercontent.com">
<div class="" id="app"></div>
  <script src="https://apis.google.com/js/platform.js?onload=triggerGoogleAuthLoaded" async defer></script>
  <script>
    function triggerGoogleAuthLoaded() {
      window.dispatchEvent(new Event('google-auth-loaded'));
    }
  </script>

解决这个问题的两种方法:1 从html脚本中删除async defer2 删除 () 所以看起来像这样window.addEventListener('google-auth-loaded',this.renderGoogleSignInButton);所以它不会立即触发

Answer 1

页面重新加载后，由于库未完全加载，会发生这种情况。

只需使用 setTimeout 进行调试即可。

setTimeout(() => {this.renderGoogleSignInButton()}, 1000);

增加时间限制值。比如5000。并检查可能是库加载问题。