Node.js 如何用React实现googlecalendarapi？

我在用React Big Calendar实现Google日历API时遇到问题。我可以将两者分开，但将两者结合起来对我来说是一个问题

到目前为止，我能够使用谷歌日历的API从公共日历中提取事件。我使用命令“node.”运行它，并且能够以日历的适当格式检索事件（json对象列表）

我可以让React Big Calendar运行静态的虚拟事件，但是当我尝试使用从GoogleAPI调用检索到的事件时，我遇到了一个名为的东西，Google没有帮助。我试图使用“npm start”运行该程序，我对代码进行了注释，发现这一行：“const{google}=require（'googleapis'）”是promisify问题的原因。我要承认，我对网络编程还不熟悉，不明白为什么它可以与node一起工作，但当我使用这两个时就不行了

这是我目前的代码：

import React, { Component } from 'react';
import moment from 'moment';
import 'react-big-calendar/lib/css/react-big-calendar.css';
import {
  Calendar,
  momentLocalizer,
} from 'react-big-calendar'

const { google } = require('googleapis')
const { OAuth2 } = google.auth

// Setup authorization to our Google Calendar API using OAuth that was setup 'console.developers.google.com'
const client_id = 'client_id'
const client_secret = 'client_secret'
const oAuth2Client = new OAuth2(client_id, client_secret)

oAuth2Client.setCredentials({
    refresh_token:'refresh_token'
})
//const calendar = google.calendar({ version: 'v3', auth: oAuth2Client })
const localizer = momentLocalizer(moment);

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      events: []
    }
  }

  comonpentDidMount = () => {
    this.getEvents()

  }

  getEvents() {
    const calendar = google.calendar({version: 'v3', oAuth2Client});

    calendar.events.list({
      calendarId: 'primary',
      singleEvents: true,
      orderBy: 'startTime',
    }, 
    (err, res) => {
      if (err) return console.log('The API returned an error: ' + err);
      const events = res.data.items;

      if (events.length) {
        console.log('Events');
        events.map((event, i) => {
          let titleName = event.summary;
          let startTime = event.start.dateTime;
          let endTime = event.end.dateTime;
          this.state.events.push( {title: titleName, start: startTime, end: endTime});
        });
      } 
      else {
        console.log('No upcoming events found.');
      }

      console.log(this.state.events);
    });

  }

} 

const calendar = () =>  {
  return(
    <div>
    <Calendar
      localizer={localizer}
      events={this.state.events}
      startAccessor="start"
      endAccessor="end"
      style={{ height: 500 }}
    />
  </div>
  )       
}

export default calendar;

import React，{Component}来自'React'；
从“力矩”中导入力矩；
导入'react big calendar/lib/css/react big calendar.css'；
进口{
日历，
动量定位器，
}来自“反应大日历”
const{google}=require（'googleapis'）
const{OAuth2}=google.auth
//使用OAuth设置对Google日历API的授权，OAuth设置为“console.developers.Google.com”
const client\u id='client\u id'
const client\u secret='client\u secret'
const oAuth2Client=新的OAuth2（客户机id，客户机机密）
oAuth2Client.setCredentials({
刷新令牌：“刷新令牌”
})
//const calendar=google.calendar（{version:'v3'，auth:oAuth2Client}）
常数定位器=力矩定位器（力矩）；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
事件：[]
}
}
comonpentDidMount=（）=>{
这个文件名为getEvents（）
}
getEvents（）{
const calendar=google.calendar（{version:'v3'，oAuth2Client}）；
calendar.events.list({
calendarId:'主'，
单身事件：对，
订购人：“startTime”，
}, 
（err，res）=>{
if（err）返回console.log（'API返回错误：'+err）；
常量事件=res.data.items；
if（events.length）{
console.log（“事件”）；
events.map（（事件，i）=>{
让titleName=event.summary；
让startTime=event.start.dateTime；
让endTime=event.end.dateTime；
this.state.events.push（{title:titleName，start:startTime，end:endTime}）；
});
} 
否则{
log（'未找到即将发生的事件'）；
}
console.log（this.state.events）；
});
}
} 
常量日历=（）=>{
返回(
)       
}
导出默认日历；

请记住，客户机id、客户机机密和刷新令牌是为了解决这个问题而特意设置的