React集成Google登录报错：window.gapi未定义无法调用load方法

这个问题我之前也碰到过！核心原因就是你的组件代码执行时，Google的gapi脚本还没加载完成，导致window.gapi是undefined，组件调用它的load方法就会抛出错误。下面给你几个靠谱的解决方案：

方案1：提前在HTML中引入gapi脚本 #

最直接的方式是在项目的public/index.html里预先引入Google平台脚本，确保它在React组件渲染前就开始加载：

<!-- 放在index.html的<body>标签末尾 -->
<script src="https://apis.google.com/js/platform.js" async defer></script>

async defer属性会让脚本异步加载，不会阻塞页面渲染，同时保证脚本加载完成后才执行。

方案2：在组件中动态加载脚本（推荐） #

如果不想修改全局HTML文件，可以在组件内部使用useEffect动态加载gapi脚本，等加载完成后再渲染GoogleLogin组件：

import { useEffect, useState } from 'react';
import GoogleLogin from 'react-google-login';

const GoogleAuth = () => {
  const [isGapiReady, setIsGapiReady] = useState(false);

  // 动态加载gapi脚本
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://apis.google.com/js/platform.js';
    script.onload = () => {
      // 脚本加载完成，标记状态为就绪
      setIsGapiReady(true);
    };
    // 异步加载，避免阻塞
    script.async = true;
    script.defer = true;
    document.body.appendChild(script);

    // 组件卸载时清理脚本
    return () => {
      document.body.removeChild(script);
    };
  }, []);

  // 脚本未加载完成时显示加载状态
  if (!isGapiReady) {
    return <div>正在加载登录组件...</div>;
  }

  const handleLoginSuccess = (response) => {
    console.log('登录成功:', response);
    // 这里处理登录后的逻辑，比如获取用户信息、存入状态等
  };

  const handleLoginFailure = (error) => {
    console.error('登录失败:', error);
  };

  return (
    <GoogleLogin
      clientId="你的Google客户端ID"
      buttonText="使用Google登录"
      onSuccess={handleLoginSuccess}
      onFailure={handleLoginFailure}
      cookiePolicy={'single_host_origin'}
    />
  );
};

export default GoogleAuth;

方案3：检查组件版本兼容性 #

如果上面两种方法都没解决，可能是你使用的react-google-login版本太旧，和最新的gapi脚本不兼容。可以尝试升级组件到最新稳定版：

npm update react-google-login
# 或者用yarn
yarn upgrade react-google-login

本质上，所有方案都是围绕确保gapi脚本加载完成后再初始化GoogleLogin组件这个核心来解决的，这样就能避免window.gapi为undefined的问题啦！

内容的提问来源于stack exchange，提问作者Ketan Modi