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

「爱情、让人受尽委屈。」 2023-10-11 23:13 88阅读 0赞

Google 表格可用于提供一个临时数据库，非开发人员可以轻松修改该数据库。它不是高流量网站的最佳解决方案，但适用于内部网站或制作应用程序原型。

在本教程中，我们将使用Papa Parse将 Google 表格中的数据提取到 React 中。

让我们开始使用 NPM 将 Papa Parse 安装到我们的 React 应用程序中：

npm install papaparse
对于本教程，我创建了一个包含以下数据的简单电子表格：
在这里插入图片描述

这个数据的结构有一些要求：

所有列的第一行都必须有一个“标签”，并且不能包含任何奇怪的字符。
Google 假定空行是工作表的末尾并停止返回数据。
工作表完成后，选择“文件”->“发布到网络”，使其公开可见。

现在对于组件，使用以下导入创建一个新的 MovieData.js 文件：

  1. import React, {
  3.      useState } from "react";
  4. import Papa from "papaparse";

接下来创建一个MovieData()函数并声明一个data将存储数据的变量：

  1. const MovieData = () => {
  2.   const [data, setData] = useState({}); 
  3. }
  4. export default MovieData;
  5. <

发表评论

表情：
评论列表 （有 0 条评论，88人围观）

还没有评论，来说两句吧...

相关阅读