如何在反应中使用gapi

Question

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

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();
  }

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

更新：

一旦我将这些代码注释掉

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

我可以获取控制台信息，是否与这些方法有关？

更新：

我可以获得 gapi 对象并 console.log(window.gapi) 查看其详细信息。

Answer 1

假设您正在使用 create-react-app 并且您 webpack 配置了一个 public HTML 文件夹，那么您需要将脚本标记放在那里。

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

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

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

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

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

另外，不用担心它会减慢任何速度或在您需要之前加载脚本。当您运行 npm run build 在生产之前，您无论如何都会将所有内容压缩到几个文件中。

编辑：

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

Answer 2

我在尝试在我的 React 项目中添加 gapi 时遇到了很多问题。我找到的所有包都已过时，因此我创建了一个新包。

gapi-script 允许您添加 gapi：

import { gapi } from 'gapi-script'

Answer 3

我为此定制了一个 Hook！

import { useEffect } from 'react';

const useGoogle = () => {

    useEffect(() => {

        const SCOPE = "TODO: your scope here";
        const handleClientLoad = () => window.gapi.load('client:auth2', initClient);
    
        const initClient = () => {
            const discoveryUrl = "TODO: your discoveryUrl here";
            window.gapi.client.init({
                'clientId': "TODO: your client id here",
                'discoveryDocs': [discoveryUrl],
                'scope': SCOPE
            });
            console.log("Google loaded");
        };

        const script = document.createElement('script');

        script.src = "https://apis.google.com/js/api.js";
        script.async = true;
        script.defer = true;
        script.onload = handleClientLoad;

        document.body.appendChild(script);

        return () => {
            document.body.removeChild(script);
        };

    }, []);
};

export default useGoogle;

如何在反应中使用gapi

How to use gapi in react

javascript

reactjs

google-api

google-api-js-client