在 Google Sheets 邊欄中使用 React Hooks 時出錯（Google Apps Script）

Question

我在 Google Sheets 邊欄（Google Apps Script）中使用 React Hooks。 側邊欄有四個按鈕，單擊其中任何一個按鈕都會使側邊欄顯示 Google 表格中當前活動的單元格。

我在瀏覽器控制台中收到以下錯誤：

未捕獲的類型錯誤：serverFunctions[functionName] 不是 handleRequest 處的函數

奇怪的是側邊欄按預期工作：當單擊任何按鈕時，當前單元格的 activeRange 按預期顯示在側邊欄中。 所以我想知道這個錯誤是從哪里來的。 我什至嘗試將功能console.log(serverfunctions.getActiveRangeA1)和功能顯示在控制台中！

serverFunctions.getActiveRangeA1: function () { for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { args[_key2] = arguments[_key2]; }

為什么會出現錯誤？

可重現的例子

我基本上只是在測試這個很棒的包https://github.com/enuchi/React-Google-Apps-Script/

我從中創建了一個 git fork，因此您可以復制錯誤： https : //github.com/nykanenj/React-Google-Apps-Script

git clone https://github.com/nykanenj/React-Google-Apps-Script.git
cd React-Google-Apps-Script
npm install
npm run login
npm run setup
npm run deploy

現在在瀏覽器中打開由 npm run setup 創建的 Google 表格“React SideBar 測試”。 應該會看到一個菜單“我的示例 React 項目”，單擊它打開側邊欄並查看按鈕。

相關代碼

這是前端 SideBar.jsx 代碼的樣子：

import React, { useState } from 'react';
import { Button } from 'react-bootstrap';
import server from '../../utils/server';

const { serverFunctions } = server;

const SideBar = () => {
    console.log(`serverFunctions: ${JSON.stringify(serverFunctions)}`)
    console.log(`serverFunctions.getActiveRangeA1: ${serverFunctions.getActiveRangeA1}`)

    const [activeRange, setActiveRange] = useState();
    const getActiveRangeA1 = () => {
        serverFunctions
          .getActiveRangeA1()
          .then(setActiveRange)
          .catch(alert);
      };

    return (
    <div>
    <button id="test" onClick={getActiveRangeA1}>Click Me1 </button>
    <button id="test" onClick={()=>getActiveRangeA1()}>Click Me2 </button>
    <Button onClick={getActiveRangeA1}>Click Me 3</Button>
    <Button onClick={() => getActiveRangeA1()}>Click Me 4</Button>
    <p>Current active range is: {activeRange}</p>
  </div>)
}

export default SideBar;

渲染者：

import React from 'react';
import ReactDOM from 'react-dom';
import SideBar from './components/SideBar';

import './styles.css';

ReactDOM.render(<SideBar />, document.getElementById('index'));

../../utils/server 的內容

import Server from 'gas-client';

const { PORT } = process.env;

const server = new Server({
  // this is necessary for local development but will be ignored in production
  allowedDevelopmentDomains: `https://localhost:${PORT}`,
});

export default server;

這是 index.js 的服務器端代碼的樣子

import * as publicUiFunctions from './ui';
import * as publicSheetFunctions from './sheets';

// Expose public functions by attaching to `global`
global.onOpen = publicUiFunctions.onOpen;
global.openSidebar = publicUiFunctions.openSidebar;
global.getActiveRangeA1 = publicSheetFunctions.getActiveRangeA1;

'./sheets' 引用的服務器端 sheet.js 的代碼

export const getActiveRangeA1 = () => {
  return SpreadsheetApp.getActive().getActiveSheet().getActiveRange().getA1Notation();
 }

正如我所說，代碼運行良好，但出現錯誤。

未捕獲的類型錯誤：serverFunctions[functionName] 不是 handleRequest 處的函數

我希望 functionName 有問題，基本上是serverFunctions.getActiveRangeA1 。 我猜 serverFunctions 不能為空，因為在錯誤中檢測到 serverFunctions。 所以我猜 serverFunctions 中的 functionName 為空或缺失。 但是當我console.log(serverfunctions.getActiveRangeA1)返回一個函數時，應該不會出現錯誤？

Answer 1

您是否嘗試過停止並重新啟動“npm run start”？

我在解決另一個問題時遇到了這個問題。 幾次嘗試后，我注意到每當更改服務器端功能時，我都必須重新啟動應用程序“npm run start”才能使其工作。

我認為有必要在 Github README.md 中添加本地開發只適應在 react 端所做的更改，而不是在 google app script 端

我在這里的第一個回復，所以我的不好的是它不是一個明確的。