Javascript 面对问题无法读取属性'；活页'；google表单中未定义的

我的要求是将表单数据存储到GoogleSheet中。因此，我遵循给定的代码。所以我创建了我的虚拟应用程序。但我面临的一些问题是：

/~/src/Hello.jsx（99:52）中出错无法读取的属性“sheets” 未定义

my hello.jsx文件代码：

import React, {Component} from 'react';  
import gapi from 'gapi-client';

const SPREADSHEET_ID = '1APT_vtl6wUbIpJFKnVFId8WaMCpUKY1k6BNvCj2SVAU'; //from the URL of your blank Google Sheet
const CLIENT_ID = '748182538740-cl28lachu9h6mr7lksvo1srcvsm4gpi0.apps.googleusercontent.com'; //from https://console.developers.google.com/apis/credentials
const API_KEY = 'AIzaSyDNSRRVh3yWeymL5Fhm5F-BqMTGNTRIS1k'; //https://console.developers.google.com/apis/credentials
const SCOPE = 'https://www.googleapis.com/auth/spreadsheets';

class TestForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      newUser: {name: '', number:''}};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  componentDidMount(){ //called automatically by React
    this.handleClientLoad(); 
  }

  handleClientLoad =()=> { //initialize the Google API
    gapi.load('client:auth2', this.initClient);
  }

  initClient =()=> { //provide the authentication credentials you set up in the Google developer console
    gapi.client.init({
      'apiKey': API_KEY,
      'clientId': CLIENT_ID,
      'scope': SCOPE,
      'discoveryDocs': ['https://sheets.googleapis.com/$discovery/rest?version=v4'],
    }).then(()=> {
      console.log('do something')
      // 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());
    });
  }
  handleChange(e) {
    const { name, value } = e.target
    this.setState(prevState => ({
      newUser:
      {
        ...prevState.newUser, [name]: value
      }
    }), () => console.log(this.state.newUser))
  }

  handleSubmit(submissionValues) {
    console.log('A name was submitted: ' + this.state.newUser);
    submissionValues.preventDefault();

    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.newUser] //convert the object's values to an array
    };

    let request = gapi.client.sheets.spreadsheets.values.append(params, valueRangeBody);
    request.then(function (response) {
      // TODO: Insert desired response behaviour on submission
      console.log(response.result);
    }, function (reason) {
      console.error('error: ' + reason.result.error.message);
    });
    console.log('values' + gapi.client)

  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.name} onChange={this.handleChange} /> <br/>

        </label>
        <label>
          Number:
        <input type="text" value={this.state.number} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}
export default  TestForm;

import React，{Component}来自'React'；
从“gapi客户端”导入gapi；
const SPREADSHEET_ID='1APT_vtl6wubijfknvfid8wamcpuky1k6bnvcj2svau'//从你的空白谷歌页面的URL
const CLIENT_ID='748182538740-cl28lachu9h6mr7lksvo1srcvsm4gpi0.apps.googleusercontent.com'//从…起https://console.developers.google.com/apis/credentials
常量API_键='Aizasydnsrrvh3ywyml5fhm5f-BqMTGNTRIS1k'//https://console.developers.google.com/apis/credentials
常数范围https://www.googleapis.com/auth/spreadsheets';
类TestForm扩展组件{
建造师（道具）{
超级（道具）；
此.state={
新用户：{名称：''，编号：'}}；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
componentDidMount（）{//由React自动调用
this.handleClientLoad（）；
}
HandleClient加载=（）=>{//初始化Google API
load（'client:auth2'，this.initClient）；
}
initClient=（）=>{//提供您在Google开发者控制台中设置的身份验证凭据
gapi.client.init({
“apiKey”：API_键，
“clientId”：客户端ID，
“范围”：范围，
“discoveryDocs”：['https://sheets.googleapis.com/$discovery/rest？版本=v4']，
}).然后（（）=>{
log（'do something'）
//gapi.auth2.getAuthInstance（）.isSignedIn.listen（this.updateSignInStatus）；//如果您想在用户登录Google后执行某项操作，请添加一个名为“updateSignInStatus”的函数
//this.updateSignInStatus（gapi.auth2.getAuthInstance（）.isSignedIn.get（））；
});
}
手变（e）{
常量{name，value}=e.target
this.setState（prevState=>({
新用户：
{
…prevState.newUser，[名称]：值
}
})，（）=>console.log（this.state.newUser））
}
handleSubmit（提交值）{
console.log（'提交的名称：'+this.state.newUser）；
submissionValues.preventDefault（）；
常量参数={
//要更新的电子表格的ID。
电子表格ID:spreadsheetId，
//用于搜索逻辑数据表的范围的A1表示法。值将附加在表的最后一行之后。
范围：'Sheet1'，//这是默认的电子表格名称，因此，除非您已更改它，或者正在提交多个工作表，否则可以保留此名称
//如何解释输入数据。
valueInputOption:'RAW'，//RAW=如果不需要对提交的数据进行转换或格式化，则返回。否则，用户输入
//如何插入输入数据。
insertDataOption:'插入\行'，//选择覆盖或插入\行
};
常量值范围体={
'majorDimension'：'ROWS'，//将每个条目记录为新行（vs列）
'values'：[this.state.newUser]//将对象的值转换为数组
};
让request=gapi.client.sheets.spreadsheets.values.append（params，valueRangeBody）；
请求。然后（函数（响应）{
//TODO:在提交时插入所需的响应行为
console.log（response.result）；
}，功能（原因）{
console.error（'错误：'+原因.结果.错误.消息）；
});
console.log（'values'+gapi.client）
}
render（）{
返回(
姓名：


编号：
);
}
}
导出默认测试表单；

请帮帮我，先谢谢你