构建一个从 Google 表格中提取数据的 React 组件

经过一些更新后，本教程不再有效 - 可以在此处找到更新后的有效教程。

Google Sheets 可用于提供一个临时数据库，方便非开发人员修改。

对于高流量网站来说，这不是最好的解决方案，但对于内部网站或应用程序原型设计来说，效果很好。

在本教程中，我们将使用Tabletop.js将数据从 Google Sheet 加载到 React 组件中。

让我们首先使用 NPM 将 Tabletop.js 安装到我们的 React 项目中：

npm install tabletop

为了本教程，我创建了一个包含以下数据的简单电子表格：

• 所有列的第一行都必须有一个“名称”，并且不能包含任何奇怪的字符（%）。
• Google 假设空行是数据的末尾，并且此后不会返回任何行。

表格完成后，选择“文件”->“发布到网络”，即可公开显示。

现在对于代码，创建一个名为 MovieData.js 的文件并导入 React（我们将使用钩子）和 Tabletop：

import React, { useEffect, useState } from "react";
import Tabletop from "tabletop";

接下来创建一个MovieData()函数并声明一个变量，该变量将数据存储在 useState 钩子中：

function MovieData() {
  const [data, setData] = useState({}); 
}
export default MovieData;

我们现在可以通过在 useEffect 钩子中添加以下内容来使用 Tabletop 获取数据MovieData()：

... 
useEffect(() => {
  Tabletop.init({
    key: "1SJ8LxWmaxKBTgDJLvfD9NZLctBT931x19--qH2yLxck",
    simpleSheet: true,
  }).then(function (data) {
    setData(data);
  });
}, []);
const movies = Array.from(data);  
...

key:取自 Google Sheet URL 的以下部分：

最后，通过在末尾添加以下内容，以无序列表的形式返回电影数据MovieData()：

... 
return (
  <ul>
    {movies.map((el) => (
      <li key={el.movie}>
        {el.movie} ({el.year}) - Rating {el.rating}
      </li>
    ))}
  </ul>
);
...