javascript - 用于将数据附加到 Google 表格的 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>
    </>
  )
}

标签： javascriptandroidiosreactjsgoogle-sheets-api

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

问题描述

解决方案

推荐阅读