轻松的数据管理：将Google表连接到您的ReactJS项目
#javascript #网络开发人员 #编程 #react

ciaoððð

在创建我自己的reactjs中创建自己的投资组合时，打开代码以每次更新任何详细信息或信息的代码是令人头疼的。尽管我有一个constants.js来管理所有恒定数据，但是我仍然必须打开VS代码，编辑常数。JS，然后一次又一次地重新部署网站。作为软件开发人员，这是我们唯一使用逻辑简化事物的目标。

Image headache

，但我终于找到了一种绕过编码并重申部署过程的方法。在本文中，我们将讨论如何将 Google表与现有或新的ReactJS项目连接。

步骤1：创建一个Google表文档

首先。您需要一个“ Google”帐户。一旦拥有：

  • 如果您尚未登录，请登录到您的Google帐户。

  • 转到Google Sheets

  • 创建一个新的Google表文档或使用现有的文档来存储您要在React项目中访问的数据。

  • 将数据添加到您的Google表格，确保第一行上的所有条目都是您的标题。

Image 1

步骤2：以CSV的形式发布您的Google表格文档

  • 在您的Google表文档中，导航到File> Publish to the web。

Image 2

  • 从出现的弹出窗口中，选择“整个文档”或您想要的任何特定表格，然后从第二个下拉列表中选择“逗号分隔值（.csv）'

Image 3

  • 单击“ Publish”按钮，然后出现“确定”浏览器弹出窗口，以使您的CSV文件可以通过公共链接访问。

  • 复制生成的链接（例如，https://docs.google.com/spreadsheets/d/e/<YOUR-DOCUMENT-LINK>/pub?output=csv）以备将来使用。

Image 4

现在我们已经完成了设置Google表，让我们回到代码。

步骤3：设置您的React项目

  • 如果您还没有使用您的首选方法（例如create-react-app），则创建一个新的React项目。 
   npx create-react-app google-sheets-react
   cd google-sheets-react
   code .

一旦您进入VS代码的编码目录（感谢code .命令），请安装HTTP客户端Axios，以向Google Shays API提出请求。

npm install axios

步骤4：从Google表中获取数据

  • 导入Axios，React，使用，使用效率和使用者在您的React组件中要获取数据。在这里我正在使用FetchCSVData.js 
import React, { useEffect, useState } from 'react';
import axios from 'axios';

export default function FetchCSVData(props) {
    // ...
}

此组件将处理Google表格的CSV数据的获取和解析。

  • 使用USESTATE钩子存储获取的CSV数据，以设置组件的状态。 
const [csvData, setCsvData] = useState([]);
  • 在组件安装时，使用使用效果钩触发CSV数据获取。 
useEffect(() => {
    fetchCSVData();
}, []);

空依赖性数组可确保此效果仅运行一次，模拟了类组件中componentdidmount的行为。

  • 定义FetchCSVData函数，该功能将负责从Google表中获取CSV数据。 
const fetchCSVData = () => {
    const csvUrl = 'YOUR_GOOGLE_SHEETS_CSV_URL_HERE'; // Replace with your Google Sheets CSV file URL
    axios.get(csvUrl)
        .then((response) => {
            // ...
        })
        .catch((error) => {
            // Handle errors
        });
}

记住Google表格给您的链接，我要求您用Google Sheeps CSV文件的实际URL替换“ your_google_sheets_csv_url_here”'your_google_sheets_csv_url_here'。

  • 定义parsecsv函数，该函数将将CSV文本解析为对象数组。 
function parseCSV(csvText) {
    const rows = csvText.split(/\r?\n/); // Split CSV text into rows, handling '\r' characters
    const headers = rows[0].split(','); // Extract headers (assumes the first row is the header row)
    const data = []; // Initialize an array to store parsed data
    for (let i = 1; i < rows.length; i++) {
        const rowData = rows[i].split(','); // Split the row, handling '\r' characters
        const rowObject = {};
        for (let j = 0; j < headers.length; j++) {
            rowObject[headers[j]] = rowData[j];
        }
        data.push(rowObject);
    }
    return data;
}
  • 在fetchcsvdata功能中，使用axios向Google Sheets CSV文件URL提出获取请求。 
axios.get(csvUrl)
    .then((response) => {
        const parsedCsvData = parseCSV(response.data);
        setCsvData(parsedCsvData);
        console.log(parsedCsvData);
    })
    .catch((error) => {
        console.error('Error fetching CSV data:', error);
    });

此代码获取CSV数据，使用PARSECSV函数解析并在组件状态中设置解析的数据。

步骤5：根据需要使用您的数据

现在我们已经完成了所有部分，如果您正确遵循了本文的每个部分，则可以从我们刚刚设置的csvData状态中查看控制台日志中的数据。 /p>

Image 5

在这里，它的整个代码以及所有注释

import { useEffect, useState } from 'react'
import axios from 'axios'; // Import Axios

export default function FetchCSVData(props) {
    const [csvData, setCsvData] = useState([]);

    useEffect(() => {
        fetchCSVData();    // Fetch the CSV data when the component mounts
    }, []); // The empty array ensures that this effect runs only once, like componentDidMount

    const fetchCSVData = () => {
    const csvUrl = 'YOUR_GOOGLE_SHEETS_CSV_URL_HERE'; // Replace with your Google Sheets CSV file URL

        axios.get(csvUrl)    // Use Axios to fetch the CSV data
            .then((response) => {
                const parsedCsvData = parseCSV(response.data);        // Parse the CSV data into an array of objects
                setCsvData(parsedCsvData);        // Set the fetched data in the component's state
                console.log(parsedCsvData);        // Now you can work with 'csvData' in your component's state.
            })
            .catch((error) => {
                console.error('Error fetching CSV data:', error);
            });
    }

    function parseCSV(csvText) {
        const rows = csvText.split(/\r?\n/);        // Use a regular expression to split the CSV text into rows while handling '\r'
        const headers = rows[0].split(',');        // Extract headers (assumes the first row is the header row)
        const data = [];        // Initialize an array to store the parsed data
        for (let i = 1; i < rows.length; i++) {
            const rowData = rows[i].split(',');          // Use the regular expression to split the row while handling '\r'
            const rowObject = {};
            for (let j = 0; j < headers.length; j++) {
                rowObject[headers[j]] = rowData[j];
            }
            data.push(rowObject);
        }
        return data;
    }
    return csvData;
}

Image yayy

结论

将Google表格纳入您的ReactJS项目可以改变游戏规则，使您无需进行代码更改和重新部署即可无缝更新内容。通过这种简单而强大的方法，您可以轻松保持网站的数据最新。 Google表会在检测到一些新的更改时自动更新文档，因此，除非需要新的标题，否则每次都需要每次更新代码。

通过遵循本指南中概述的步骤，您已经学习了如何将您的React项目连接到Google表格，动态获取数据并使您的Web开发过程更有效。现在，您配备了一个有价值的工具，可以创建数据驱动，易于维护的反应应用程序。

快乐的编码ð