如何在反应中使用gapi [英] How to use gapi in react

问题描述

我想使用gapi从Google访问人的api资源，我尝试了很多方法来完成这项工作，但仍然无法获得任何回应.它没有错误，没有警告.这是我的代码.

I want to use gapi to access people api resources from google, I tried many ways to do the job, but I still cannot get any response. It has not error, no warning. Here is my code.

loadYoutubeApi() {
    const script = document.createElement("script");
    script.src = "https://apis.google.com/js/client.js";

    script.onload = () => {
      window.gapi.load('client', () => {
        window.gapi.client.setApiKey(types.API_KEY)
        window.gapi.client.setClientId(types.CLIENT_ID)
        window.gapi.client.setDiscoveryDocs(types.DISCOVERY_DOCS)
        window.gapi.client.setScope(types.SCOPE)
        window.gapi.client.load('client:auth2', 'v3', () => {
          console.log("gapi is ready")
          this.setState({ gapiReady: true });
        });
      });
    };

    document.body.appendChild(script);
  }

  componentDidMount() {
    this.loadYoutubeApi();
  }

谁能告诉我为什么我什至无法获得控制台日志信息，它真的有效吗?

Can anyone tell me why I cant even get the console log info, is it actually working?

更新:

一旦我将这些代码注释掉

Once I commented these codes out

window.gapi.client.setClientId(types.CLIENT_ID)
window.gapi.client.setDiscoveryDocs(types.DISCOVERY_DOCS)
window.gapi.client.setScope

我可以获得控制台信息，这与这些方法有关吗?

I can get my console info, is it something to do with those methods?

更新:

我可以获取gapi对象和console.log(window.gapi)来查看其详细信息.

I can get gapi object and console.log(window.gapi) to see its detail.

推荐答案

假设您正在使用create-react-app，并且已为webpack配置了公共HTML文件夹，那么您将需要在其中放置脚本标签.

Assuming you are using create-react-app and you have webpack configured with a public HTML folder, than that is where you will need to place your script tag.

在某些文本编辑器项目树中可能看不到公用文件夹，但是会在OS文件浏览器中看到它.只需转到公用文件夹并用以下行编辑index.html:

You may not see your public folder in certain text editor project trees, but you will see it in your OS file browser. Simply go to the public folder and edit index.html with the line:

<script src="https://apis.google.com/js/client.js"></script>

在结束</head>标记的正上方.无论如何，您都是使用当前代码间接进行此操作.您可以删除:

right above the closing </head> tag. You are doing this indirectly with your current code anyway. You can remove:

 const script = document.createElement("script");
 script.src = "https://apis.google.com/js/client.js";

和onload调用，将所有api对象调用(以窗口为基础对象)放置在componentDidMount()方法中.您不必担心它会被加载，因为您的组件只有在加载完所有内容之后才能安装.

and the onload call, placing all of your api object calls (with window as the base object) in your componentDidMount() method. You don't have to worry about it being loaded as your component can only mount after everything is loaded.

此外，不用担心它会降低速度或在需要之前加载脚本.在生产前运行npm run build时，无论如何都会将所有内容压缩为几个文件.

Also, don't worry about it slowing anything down or loading the script before you need it. When you run npm run build before production you will condense everything into a few files anyway.

您应该将onload调用更改为addEventListener('load', callback);

这篇关于如何在反应中使用gapi的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！