Question

我试图在一个简单的React应用中加载Google API，但我不断收到这个恼人的错误 - 请参阅下文：

Uncaught TypeError: this.fl is not a function
  at _.C.ria (cb=gapi.loaded_0:82)
  at _.C.<anonymous> (cb=gapi.loaded_0:596)
  at h.r2 (cb=gapi.loaded_0:82)
  at xs (cb=gapi.loaded_0:85)
  at Wq (cb=gapi.loaded_0:85)
  at _.C.uea (cb=gapi.loaded_0:85)
  at Ap (cb=gapi.loaded_0:78)
  at <anonymous>

即使我尝试在我的代码中包含一些控制台日志语句，我会在执行时看到它们，然后清除它们并替换为此错误消息。

这是我的App.js：

import React from 'react'
import firebase from 'firebase'
import './App.css'
import AppHeader from '../AppHeader'


var GoogleAuth


class App extends React.Component {

  componentDidMount() {

    firebase.auth().onAuthStateChanged(user => this.setState({user}))

    const script = document.createElement('script')
    script.src = 'https://apis.google.com/js/api.js'

    script.onload = () => {
      if (!GoogleAuth) {
        window.gapi.load('client', () => {
          window.gapi.client.init({
            clientId: 'XXXX',
            scope: 'https://www.googleapis.com/auth/calendar'
          })
          .then(() => GoogleAuth = window.gapi.auth2.getAuthInstance())
        })
      }
    }

    document.head.appendChild(script)
  }

  render() {
    return (
      <AppHeader user={this.state.user} />
    )
  }
}

export default App

感谢任何帮助！

Answer 1

Init返回GoogleAuth的实例。因此，与其像在此处一样尝试将getAuthInstance（）移出窗口，要么

window.gapi.client.init({
  clientId: 'XXXX',
  scope: 'https://www.googleapis.com/auth/calendar'
})
.then(() => GoogleAuth = window.gapi.auth2.getAuthInstance())

我必须使用init的返回结果

window.gapi.client.init({
  clientId: 'XXXX',
  scope: 'https://www.googleapis.com/auth/calendar'
})
.then(GoogleAuth => {
   // no need to call getAuthInstance, you have it as the resolution of the init promise
   // GoogleAuth.signIn();
   // GoogleAuth.signOut();
   // etc.
});

gapi this.fl不是一个功能

1 个答案: