Возникла проблема: не удается прочитать свойства листов "неопределенных" в листах Google. - PullRequest
Новая
       4

Возникла проблема: не удается прочитать свойства листов "неопределенных" в листах Google.

0 голосов
/ 07 февраля 2020

Мое требование - сохранить данные формы в листе Google. Для этого я следую приведенному коду пример . Итак, я создал свое фиктивное приложение. Ссылка . Но кое-как я сталкиваюсь с проблемой:

Ошибка в /~/src/Hello.jsx (99:52) Невозможно прочитать «листы» свойств неопределенных

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;

Пожалуйста, помогите мне заранее Спасибо.

...