带有 React 的 Google 日历 API

Question

我正在尝试在 React 和 Firebase 应用中使用 Google Calendar API。我在 App.js 组件中向 Google 进行身份验证，同时我尝试在 Calendar.js 组件中访问 Google Calendar API。

这是我的App.js：

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


class App extends React.Component {

  constructor() {
    super()
    this.state = {
      user: null,
      googleAuth: null
    }
  }

  componentDidMount() {

    // capture authentication callback
    firebase.auth().onAuthStateChanged(user => {
      if (user !== this.state.user) {
        this.setState({user})
      }
    })

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

    script.onload = () => {
      window.gapi.load('client:auth2', () => {
        window.gapi.client.init({
          clientId: 'client_Id',
          scope: 'https://www.googleapis.com/auth/calendar'
        }).then(() =>
          this.setState({googleAuth: window.gapi.auth2.getAuthInstance()})
        )
      })
    }

    document.head.appendChild(script)
  }

  handleAuthClick = () => {

    let {googleAuth} = this.state

    if (this.state.user) {

      googleAuth.signOut().then(firebase.auth().signOut())

    } else {

      googleAuth.signIn().then(googleUser => {

          var unsubscribe = firebase.auth().onAuthStateChanged(firebaseUser => {
            unsubscribe()

            if (!isUserEqual(googleUser, firebaseUser)) {

              var credential = firebase.auth.GoogleAuthProvider.credential(googleUser.getAuthResponse().id_token)
              firebase.auth().signInWithCredential(credential)
                .then(user => this.setState({user}))
                .catch(error => console.error(error))

            } else {

              console.log('User already signed-in Firebase.')
              console.log(googleUser)
            }
          })
      })

      let isUserEqual = (googleUser, firebaseUser) => {
        if (firebaseUser) {
          var providerData = firebaseUser.providerData
          for (let i = 0; i < providerData.length; i++) {
            if (providerData[i].providerId === firebase.auth.GoogleAuthProvider.PROVIDER_ID &&
                providerData[i].uid === googleUser.getBasicProfile().getId()) {
              return true
            }
          }
        }
        return false
      }
    }
  }

  render() {

    let {user} = this.state

    return (
      <div>
        <AppHeader onAuthClick={this.handleAuthClick} user={user} />
        {user ? <AppBody userID={user.uid} /> : undefined}
      </div>
    )
  }
}

export default App

这是我的Calendar.js（它由 AppBody 组件加载）

import React from 'react'
import './Calendar.css'


class Calendar extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      events: []
    }
  }

  componentDidMount() {

    if (window.gapi && window.gapi.client) {

      var timeMin = new Date()
      timeMin.setHours(0, 0, 0)

      var timeMax = new Date()
      timeMax.setHours(23, 59, 59)

      window.gapi.client.load('calendar', 'v3', () => {
        window.gapi.client.calendar.events.list({
          'calendarId': 'primary',
          'timeMin': timeMin.toISOString(),
          'timeMax': timeMax.toISOString(),
          'singleEvents': true
        }).then(response => {
          let events = []
          response.result.items.forEach(event => {
            events.push({
              title: event.summary,
              start: new Date(event.start.dateTime),
              end: new Date(event.end.dateTime)
            })
          })
          this.setState({events})
        })
      })
    }
  }

  render() {

    console.log(this.state.events)

    return (
      ...render events...
    )
  }
}

export default Calendar

问题是，如果我不断刷新屏幕，我会得到非常不一致的结果：

• 有时我会获取并呈现事件列表。
• 通常情况下，我没有收到任何事件。
• 有时，我会收到以下错误：

Uncaught {result: {…}, body: "{↵ "error": {↵ "errors": [↵ {↵ "domain": "us…e Exceeded. Continued use requires signup."↵ }↵}↵", headers: {…}, status: 403, statusText: null}

我显然没有正确使用日历 API。但是我做错了什么？

Answer 1

假设 window.gapi 是您通过脚本标签设置并调用窗口对象的日历 API 对象，请考虑在您在 componentDidMount 中调用它时脚本是否已加载。

如果脚本在您的组件安装之前运行，您将渲染事件。 如果在你的组件挂载时脚本没有加载，你的 state.events 数组将为空，导致没有事件。 最后一个错误似乎是配额错误；你可以在这里检查你的 api 设置：https://console.cloud.google.com/apis/api/calendar-json.googleapis.com/overview