在反应应用中使用Google API

时间:2017-04-24 20:21:00

标签: javascript reactjs google-api react-router

我有一个小应用程序,它使用google api从电子表格中获取一些数据。我已按照此处的教程进行操作:

https://developers.google.com/sheets/api/quickstart/js

我的工作得很好。当我将api脚本集成到我的反应应用程序中时,我遇到了一些错误:

Failed to compile.

Error in ./src/components/API.js

C:\Users\my-pc\Desktop\my_project\src\components\API.js
18:9   warning  'authorizeButton' is assigned a value but never used  no-unused-vars
19:9   warning  'signoutButton' is assigned a value but never used    no-unused-vars
24:14  warning  'handleClientLoad' is defined but never used          no-unused-vars
25:7   error    'gapi' is not defined                                 no-undef
33:7   error    'gapi' is not defined                                 no-undef
39:9   error    'gapi' is not defined                                 no-undef
42:28  error    'gapi' is not defined                                 no-undef
66:14  warning  'handleAuthClick' is defined but never used           no-unused-vars
67:7   error    'gapi' is not defined                                 no-undef
73:14  warning  'handleSignoutClick' is defined but never used        no-unused-vars
74:7   error    'gapi' is not defined                                 no-undef
94:7   error    'gapi' is not defined                                 no-undef

✖ 12 problems (7 errors, 5 warnings)

我正在从我的应用程序中的es6类运行api调用,该类从另一个模块调用,并且它与console.log测试一起使用:

class SheetsAPI {

  constructor() {
  this.sheetsGET();
}

  sheetsGET() {
       console.log('the class is working fine');
      //same boilerplate api code from the google API tutorial 
}

export default SheetsAPI;

看起来谷歌api库永远不会被加载,虽然我在关闭正文标记之前就像我在index.html中推荐的教程一样调用它。 我已经尝试将磁带库加载到磁头中并且没有任何区别。我也使用了反应路由器。

我的index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>


  <body class="app">
    <div id="root"></div>

    <script async defer src="https://apis.google.com/js/api.js"
      onload="this.onload=function(){};handleClientLoad()"
      onreadystatechange="if (this.readyState === 'complete') this.%PUBLIC_URL%/css/onload()">
    </script>
  </body>
</html>

有什么建议吗?

0 个答案:

没有答案