Google Zeichen Button verschwindet, wenn ich aktualisieren - Reagieren

Question

Anmelden Taste funktioniert nur, wenn der Server startet, aber sobald ich auf dem Browser aktualisieren die Zeichen in Schaltfläche gegangen ist und diese Fehlermeldung zeigt:

Error picture

Und wenn ich Firefox in der Konsole verwenden, heißt es window.gapi ist undefined

Ich bin mir nicht sicher, warum dieser Fehler passiert, würde ich mich freuen, wenn Sie helfen können :) danke.

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

dies ist mein reagieren Code:

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> 
    ); 
    } 
} 

---

Meine 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> 

2 Möglichkeiten, dies zu lösen: 1 Entfernen asynchroner aus dem HTML-Skript verschieben 2 Entfernen Sie die(), so sieht es so aus window.addEventListener ('goog le-auth-loaded ', this.renderGoogleSignInButton); so wird es nicht sofort auslösen

Answer 1

Nach dem Neuladen der Seite wird aufgrund der Bibliothek nicht vollständig geladen passieren.

Debuggen Sie einfach mit setTimeout.

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

Erhöhen Sie den Zeitgrenzwert. Wie 5000. Und prüfen Sie, ob es sich um ein Problem beim Laden der Bibliothek handelt.