在react应用程序中未定义Gapi以访问google sheets api

import React, { useEffect, useState } from 'react';
import { google } from 'googleapis';

const SPREADSHEET_ID = 'YOUR_SPREADSHEET_ID';

const GoogleSheetsApp = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const initGapi = async () => {
      await gapi.client.init({
        apiKey: 'YOUR_API_KEY',
        clientId: 'YOUR_CLIENT_ID',
        discoveryDocs: ['https://sheets.googleapis.com/$discovery/rest?version=v4'],
        scope: 'https://www.googleapis.com/auth/spreadsheets.readonly',
      });

      await gapi.client.load('sheets', 'v4');
    };

    const fetchDataFromSheet = async () => {
      try {
        const response = await gapi.client.sheets.spreadsheets.values.get({
          spreadsheetId: SPREADSHEET_ID,
          range: 'Sheet1',
        });

        setData(response.data.values);
      } catch (error) {
        console.error('Error fetching data from Google Sheets API:', error);
      }
    };

    if (typeof gapi !== 'undefined') {
      initGapi().then(fetchDataFromSheet);
    }
  }, []);

  return (
    <div>
      <h1>Data from Google Sheets</h1>
      <ul>
        {data.map((row, index) => (
          <li key={index}>{row.join(', ')}</li>
        ))}
      </ul>
    </div>
  );
};

export default GoogleSheetsApp;