用于将数据附加到 Google Sheet 的 React 组件可在 PC 上运行，但不适用于 iOS 或 Android

如何解决用于将数据附加到 Google Sheet 的 React 组件可在 PC 上运行，但不适用于 iOS 或 Android

我有一个带有以下组件的 React 应用程序，用于将行附加到 Google 表格。该组件在运行 Windows 10 的 PC 上完美运行。在我的 iPad 和 Pixel 3 上，当我单击“登录”时，我会看到 Google 登录屏幕，但是当我单击“保存”以执行 API 调用以进行追加时，没有任何反应。我在调试中使用了警报来确定正在调用 execute() 函数。但它不会附加数据或到达 .then 块。帮助！

import React,{ useState,useEffect } from "react"
import { get } from "../helpers/localStorage"

const SPREADSHEET_ID = process.env.REACT_APP_GOOGLE_SHEETS_ID
const CLIENT_ID = process.env.REACT_APP_CLIENT_ID
const API_KEY = process.env.REACT_APP_GOOGLE_SHEETS_API_KEY
const ScopE = "https://www.googleapis.com/auth/spreadsheets"

export default function AddGuestToGoogleSheet() {
  const [state,setState] = useState({ gapi: null })
  let ghinNumber = get("ghinNumber")
  let guests = get("guests")

  useEffect(() => {
    require("google-client-api")().then((gapi) => {
      setState({ gapi: gapi })
    })
  },[state.gapi])

  function handleSignInClick() {
    if (state.gapi !== null) {
      authenticate().then(loadClient)
    }
  }

  function handleSaveClick() {
    if (state.gapi !== null) {
      execute()
    }
  }

  function authenticate() {
    return state.gapi.auth2
      .getAuthInstance()
      .signIn({
        scope: ScopE,})
      .then(
        function () {
          console.log("Sign-in successful")
        },function (err) {
          console.error("Error signing in",err)
        }
      )
  }
  function loadClient() {
    state.gapi.client.setApiKey(API_KEY)
    return state.gapi.client
      .load("https://sheets.googleapis.com/$discovery/rest?version=v4")
      .then(
        function () {
          console.log("GAPI client loaded for API")
        },function (err) {
          console.error("Error loading GAPI client for API",err)
        }
      )
  }

  // Make sure the client is loaded and sign-in is complete before calling this method.
  function execute() {
    return state.gapi.client.sheets.spreadsheets.values
      .append({
        spreadsheetId: SPREADSHEET_ID,range: ghinNumber + "!A1:A3",includeValuesInResponse: true,insertDataOption: "INSERT_ROWS",responseDateTimeRenderOption: "FORMATTED_STRING",responseValueRenderOption: "UNFORMATTED_VALUE",valueInputoption: "RAW",resource: {
          values: guests,},})
      .then(
        function (response) {
          localStorage.removeItem("guests")
          document.location = "/settings/logout"
          // Handle the results here (response.result has the parsed body).
          console.log("Response",response)
        },function (err) {
          console.error("Execute error",err)
        }
      )
  }

  if (state.gapi !== null) {
    state.gapi.load("client:auth2",function () {
      state.gapi.auth2.init({
        client_id: CLIENT_ID,})
    })
  }

  return (
    <>
      <div className="div--center div--bordered">
        <h4>
          To save your guest(s) to your table
          <br />
          of players in Google Sheets
        </h4>
        <button className="button" onClick={handleSignInClick}>
          Sign In
        </button>
        <span className="span_then--bold"> then </span>
        <button className="button" onClick={handleSaveClick}>
          Save
        </button>
        <br />
        <br />
      </div>
    </>
  )
}

解决方法

解决方案是在 handleSignInClick 中“authenticate()”，然后在 handleSaveClick 中“loadClient().then(execute)”。这适用于我的 PC、iPad 和 Pixel 3。