gapi this.fl 不是函数答案

【问题标题】：gapi this.fl is not a functiongapi this.fl 不是函数
【发布时间】：2018-08-21 16:12:17
【问题描述】：

我正在尝试在一个简单的 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

感谢任何帮助！

【问题讨论】：

我在 vue 项目中遇到了同样的问题。你发现问题出在@artooras 了吗？
公平地说，我不确定问题出在哪里，但我不再遇到它（现在！）。我所做的更改非常微不足道，例如现在加载'client：auth2'并在setState 之前检查if (user !== this.state.user) onAuthStateChanged，但我怀疑这些是原因......
遇到同样的问题

标签： javascript reactjs firebase google-api-js-client

【解决方案1】：

Init 返回一个 GoogleAuth 实例。所以不要像你在这里做的那样尝试 getAuthInstance() 离开窗口

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

我不得不使用初始化的返回

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

【讨论】：