reactjs - TypeError：无法读取未定义的属性（读取“加载”）

Question

大家好，提前感谢您的帮助。我一直在玩 React 和 Goole sheet api。据我所知，我认为大部分工作都按照我的想法进行，但出现了上述错误。

代码：

/* global gapi */

import React from 'react';
import './App.css';
import {Link} from 'react-router-dom'

class CreateAccount extends React.Component {
    state = {
        username:"none",
        password:"none",
        email:"none"
    }

    acctHandleUserNameChange = event =>{
        this.setState({
            username: event.target.value
          })
    }

    acctHandlePasswordChange = event =>{
        this.setState({
            pasword: event.target.value
          })
    }

    acctEmailChange = event =>{
        this.setState({
            email: event.target.value
        })
    }

    makeApiCall() {
        var params = {
            spreadsheetId: 'xxxxxxxxxxxxxxxxxxxxxx',
            range: 'A1:A3',
            valueInputOption: 'USER_ENABLED',
            insertDataOption: 'INSERT_ROWS', 
        };

        var valueRangeBody = {
            "values": [
                [
                  this.state.username,
                  this.state.password,
                  this.state.email
                ]
            ]          
        };

        var request = gapi.client.sheets.spreadsheets.values.append(params, valueRangeBody);
        request.then(function(response) {
        // TODO: Change code below to process the `response` object:
            console.log(response.result);
        }, function(reason) {
            console.error('error: ' + reason.result.error.message);
        });
    }

    initClient() {
        var API_KEY = 'xxxxxxxxxxxxxxxxxxxxxxx';
        var CLIENT_ID = 'xxxxxxxxxxxxxxxxxxxxxxxgxxx';  // 
  
        // TODO: Authorize using one of the following scopes:
        //   'https://www.googleapis.com/auth/drive'
        //   'https://www.googleapis.com/auth/drive.file'
        //   'https://www.googleapis.com/auth/spreadsheets'
        var SCOPE = 'www.googleapis.com/auth/spreadsheets';
  
        gapi.client.init({
          'apiKey': API_KEY,
          'clientId': CLIENT_ID,
          'scope': SCOPE,
          'discoveryDocs': ['https://sheets.googleapis.com/$discovery/rest?version=v4'],
        }).then(function() {
          gapi.auth2.getAuthInstance().isSignedIn.listen(this.updateSignInStatus());
          this.updateSignInStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
        });
      }

    handleClientLoad() {
        window.gapi.load('client:auth2', this.initClient());
      }
  
    updateSignInStatus(isSignedIn) {
        if (isSignedIn) {
          this.makeApiCall();
        }
      }
  
    handleSignInClick(event) {
        gapi.auth2.getAuthInstance().signIn();
      }
  
    handleSignOutClick(event) {
        gapi.auth2.getAuthInstance().signOut();
      }

    handleCreateAccount(){
        console.log("test Start");
        this.handleClientLoad();
        console.log("test end");
    }

    render(){
        return (
            <div>
                <p>
                    <input type="text" placeholder="Enter username" onChange={event => this.acctHandleUserNameChange(event)}></input>
                </p>
                
                <p>
                    <input type="text" placeholder="Enter password" onChange={event => this.acctHandlePasswordChange(event)}></input>
                </p>
                <p>
                    <input hint="email" placeholder="Enter email" type="text" onChange={event => this.acctEmailChange(event)}></input>
                </p>
                <p>
                    <button onClick={()=>this.handleCreateAccount()}>Create</button>
                </p>
                <p>
                    <Link to="/">
                        <button>Back</button>
                    </Link>
                </p>
            </div>
        );
    }
}

export default CreateAccount;

有问题的代码部分是不允许加载的 handleClientLoad()

标签： reactjs