将数据从React应用程序发送到Google Sheets w axios

Question

我对 React 和 Typescript 非常陌生，这周刚刚开始。我正在尝试制作一个表单，提交表单后数据将发送到 Google 表格。我遇到了几篇文章，并按照教程使用 axios 发布并使用sheet.best 将我的 google 工作表转换为restapi，但是，我很快意识到这不是最佳的。无论如何，我仍然可以使用 axios 将数据发布到我的谷歌表格而不使用sheet.best吗？最好的选择是什么？我查看了 Google Sheets API 并尝试将其添加到我的代码中，但没有成功。这是代码。再说一次，我真的很新，我不确定我做的事情是否正确 T-T

"use client";
import axios from 'axios';
import './waitlist.css';
import { Button } from 'semantic-ui-react';
import React, { useState } from 'react';
import { Modal } from 'antd';




  const JoinWaitList = () => {
    const[fname, setFName] = useState("");
    const[lname, setLName] = useState("");
    const[email, setEmail] = useState("");
    const[phone, setPhone] = useState("");
    const[sms, setSMS] = useState(false);
    const [isModalOpen, setIsModalOpen] = useState(false);



   const handleFNameChange = event => {
    setFName(event.target.value)
  };
   const handleLNameChange = event => {
    setLName(event.target.value)
  };
   const handleEmailChange = event => {
    setEmail(event.target.value)
  };
   const handlePhoneChange = event => {
    setPhone(event.target.value)
  };
   const handleSMSChange = event => {
      setSMS(event.target.checked)
  };



      const showModal = () => {
         setIsModalOpen(true);
      };

      const handleOk = () => {
        setIsModalOpen(false);
      };


     const handleSubmit = event => {
      //const formEle = (document.querySelector('form-container')!);
      event.preventDefault();
  

  const objt = {fname, lname, email, phone, sms };

  console.log(
    `\n
    First Name: ${fname} \n
    Last Name: ${lname} \n
    Email Address: ${email} \n
    Phone Number: ${phone} \n
    SMS Promotions: ${sms}
    `)
    /*
here is me trying to use googlesheets as rest api
    const formData = new FormData(formEle)
         fetch("google-script-url, {
      method: 'POST',
      body: formData,
      mode: "no-cors"
    });
    */
    
    axios.post('https://sheet.best/api/sheets/762ac4d1-2113-4f9f-bfa7-881a21b0db4e', 
      objt
    )
    
    .then(response => {
      console.log(response);
      
      setFName('');
      setLName('');
      setEmail('');
      setPhone('');
      setSMS(false);
      showModal();
    })
    .catch(error => {
      console.error(error);
    });
  };

Answer 1

如果 Google Sheet API 对您来说太麻烦，请尝试 Zerosheets，因为使用 Axios 会让您更轻松。我在自己的项目中使用它。