在 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 端

我在这里的第一个回复，所以我的不好的是它不是一个明确的。