React.js集成Google Calendar遇阻：点击添加事件无响应求助

你的代码核心问题是未等待Google API客户端初始化和Calendar API加载完成就执行后续逻辑，导致登录后依赖的API实例未就绪，事件插入流程无法正常触发。以下是具体问题点和修复后的完整代码：

原代码的关键问题 #

• 忽略gapi.client.init的异步性：该方法返回Promise，直接调用gapi.auth2.getAuthInstance()会导致认证实例未初始化
• 忽略gapi.client.load('calendar', 'v3')的异步性：Calendar API加载未完成就调用事件插入接口，会引发API未定义错误
• 缺少错误捕获：没有处理登录、API初始化、事件插入过程中的异常，无法定位失败原因
• 未导入logo资源：JSX中使用的logo变量未定义，会导致组件渲染报错
• 事件时间为过去值：Google Calendar不允许创建过去的事件，原代码中的2020年时间会被拒绝

修复后的完整代码 #

import React from 'react';
// 根据实际路径导入logo资源，示例为src目录下的logo.svg
import logo from './logo.svg';

function GoogleCalendar() {
  const gapi = window.gapi;
  // 替换为你在Google Cloud Console中获取的实际值
  const CLIENT_ID = "你的客户端ID";
  const API_KEY = "你的API密钥";
  const DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"];
  const SCOPES = "https://www.googleapis.com/auth/calendar.events";

  const handleClick = async () => {
    try {
      // 等待client和auth2模块加载完成
      await new Promise(resolve => gapi.load('client:auth2', resolve));
      
      // 等待客户端初始化完成
      await gapi.client.init({
        apiKey: API_KEY,
        clientId: CLIENT_ID,
        discoveryDocs: DISCOVERY_DOCS,
        scope: SCOPES,
      });
      
      // 等待Calendar API加载完成
      await new Promise(resolve => gapi.client.load('calendar', 'v3', resolve));
      
      // 执行登录并等待完成
      const authInstance = gapi.auth2.getAuthInstance();
      await authInstance.signIn();

      // 构造事件数据（使用未来时间）
      const event = {
        'summary': 'Awesome Event!',
        'location': '800 Howard St., San Francisco, CA 94103',
        'description': 'Really great refreshments',
        'start': {
          'dateTime': '2024-12-28T09:00:00-07:00',
          'timeZone': 'America/Los_Angeles'
        },
        'end': {
          'dateTime': '2024-12-28T17:00:00-07:00',
          'timeZone': 'America/Los_Angeles'
        },
        'recurrence': [
          'RRULE:FREQ=DAILY;COUNT=2'
        ],
        'attendees': [
          {'email': 'lpage@example.com'},
          {'email': 'sbrin@example.com'}
        ],
        'reminders': {
          'useDefault': false,
          'overrides': [
            {'method': 'email', 'minutes': 24 * 60},
            {'method': 'popup', 'minutes': 10}
          ]
        }
      };

      // 插入事件并处理结果
      const response = await new Promise((resolve, reject) => {
        const request = gapi.client.calendar.events.insert({
          'calendarId': 'primary',
          'resource': event,
        });
        request.execute(result => {
          result.error ? reject(result.error) : resolve(result);
        });
      });

      console.log('事件创建成功:', response);
      window.open(response.htmlLink);
    } catch (error) {
      console.error('操作失败:', error);
      alert('添加事件失败，请查看控制台日志');
    }
  };

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>点击按钮添加事件到Google Calendar</p>
        <p style={{ fontSize: 18 }}>请确保已填写正确的Client ID和API密钥</p>
        <button style={{ width: 100, height: 50 }} onClick={handleClick}>添加事件</button>
      </header>
    </div>
  );
}

export default GoogleCalendar;

关键改动说明 #

• 使用async/await处理所有异步操作：确保每一步依赖的API都已就绪后再执行后续逻辑
• 添加全局错误捕获：通过try/catch捕获流程中的所有异常，方便排查问题
• 更新事件时间：改为未来时间，符合Google Calendar的创建规则
• 修复资源导入：添加logo的导入语句，避免渲染报错
• 规范变量声明：使用const替代var，符合React代码规范

额外注意事项 #

• 确保已在Google Cloud Console中启用Google Calendar API
• 确认Client ID和API密钥的授权域名与应用部署域名一致
• 测试环境需使用HTTPS（localhost除外），否则Google OAuth无法正常工作

内容的提问来源于stack exchange，提问作者Ali Raees