гэппи неопределенная ошибка при попытке использовать API листов Google

Question

Я пытаюсь запустить программу, которая будет сохранять данные на листах Google - я получаю сообщение об ошибке не определено. Я пробовал гуглить, но пока без помощи. Проблема в том, что я неправильно использую шлем с React? Кроме того, я подумал, что проблема может заключаться в том, что в учебном пособии, по которому я следовал, вызывался onreadystatechange="if (this.readyState==='complete') this.onLoad()", а в PHPStorm такого тега html нет. Любая помощь будет оценена.

/* global gapi */

import React from "react";
import Layout from "../components/layout";
import {Link} from "gatsby";
import {Helmet} from "react-helmet"



 const SPREADSHEET_ID="19bDY2sJWyqNm4L3e3Ln-DeT-BiNnNBmwk_LjJiAe1Do";
 const API_KEY = "AIzaSyCHqHcnEUXkO8YU6a-_sTXKBCPUmmY2CZc";
 const SCOPE ="https://www.googleapis.com/auth/spreadsheets";
 const CLIENT_ID =' 835386440370-ibr4qbmq5a0acvg7v2o7h4dpbsoo1so5.apps.googleusercontent.com';

class Review extends React.Component {
    componentDidMount() {
        this.handleClientLoad();
    }
    state = {
        fullName: window.history.state.firstName+ " " +window.history.state.lastName,
            ...window.history.state
    }






    handleClientLoad=()=>
    {
        gapi.load('client:auth2', this.initClient);
    }
    initClient=()=>{
        gapi.client.init({
            'apiKey': API_KEY,
            'clientId': CLIENT_ID,
            'scope': SCOPE,
            'discoveryDocs': ['https://sheets.googleapis.com/$discovery/rest?version=v4'],
        }).then(()=> {
            gapi.auth2.getAuthInstance().isSignedIn.listen(this.updateSignInStatus); //add a function called `updateSignInStatus` if you want to do something once a user is logged in with Google
            this.updateSignInStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
        });
    }

    render()
    {



        return(
            <Layout>
                <Helmet>
                    < script
                        type="text/javascript"
                        src="https://apis.google.com/js/api.js"
                        async
                        defer
                        crossOrigin="anonymous"
                        onLoad="this.onLoad=function(){  };"
                      onreadystatechange="if (this.readyState==='complete') this.onLoad()"


                    />
                    <scirpt type ="text/javascript" src = "C:\Users\yaako\Desktop\test.js"/>
                </Helmet>

                <h1>Does everything look right?</h1>
                <form onSubmit={this.onFormSubmit}>
                    <labeL>
                    <input type="text" id = "fullname" value ={this.state.fullName}/>
                </labeL>
                    <br/>
                    <labeL> Pies :
                        <input type="text" id = "Pies" value =  {this.state.pies}/>
                    </labeL>

                    <br/>
                    <labeL> Fries :
                        <input type="text" id = "Fries" value =  {this.state.fries}/>
                    </labeL>

                    <br/>
                    <labeL> Total : $
                        <input type="text" id = "Total" value =  {this.state.totalPricePies+this.state.totalPriceFries}/>
                    </labeL>

                    <br/>



    <Link to="/Order_Page/" state={this.state} style={{backgroundColor :"grey", color: "white",
    textDecoration: "none",
        textTransform: "uppercase"
    }}
    >Edit your order  </Link>



                    
                </form>
            </Layout>


        )
    }




    constructor(props, context) {
        super(props, context);

this.onFormSubmit= this.onFormSubmit.bind(this);
    }



        onFormSubmit = () =>{



            const params = {
                // The ID of the spreadsheet to update.
                spreadsheetId: SPREADSHEET_ID,
                // The A1 notation of a range to search for a logical table of data.Values will be appended after the last row of the table.
                range: 'Sheet1', //this is the default spreadsheet name, so unless you've changed it, or are submitting to multiple sheets, you can leave this
                // How the input data should be interpreted.
                valueInputOption: 'RAW', //RAW = if no conversion or formatting of submitted data is needed. Otherwise USER_ENTERED
                // How the input data should be inserted.
                insertDataOption: 'INSERT_ROWS', //Choose OVERWRITE OR INSERT_ROWS
            };

            const valueRangeBody = {
                'majorDimension': 'ROWS', //log each entry as a new row (vs column)
                'values': [this.state] //convert the object's values to an array
            };

            let request = gapi.client.sheets.spreadsheets.values.append(params, valueRangeBody);
            request.then(function (response) {

                console.log(response.result);
            }, function (reason) {
                console.error('error: ' + reason.result.error.message);
            });





        }
}
export default Review