React应用中Google Sign In按钮异常问题求助

问题1：页面刷新后登录按钮偶尔消失 #

原因：带async defer标记的Google脚本可能在React的useEffect执行时还未加载完毕，此时window.google不存在，导致按钮渲染逻辑未触发。

解决办法：

• 确保Google脚本加载完成后再初始化按钮，改用动态加载脚本的方式，更可控。
• 给容器添加引用，避免DOM查询出错，同时添加脚本加载失败的兜底处理。

问题2：切换账号后按钮仍显示旧账号邮箱 #

原因：Google登录按钮会缓存已登录账号的信息，切换账号后未主动更新按钮状态。

解决办法：

• 在登录回调handleGoogle中，调用google.accounts.id.disableAutoSelect()清除自动选中状态，随后重新渲染按钮。
• 每次渲染按钮前先清空容器，避免重复创建按钮实例。

修改后的代码示例 #

import { useEffect, useRef } from 'react';

const GoogleLoginButton = () => {
  const signUpDivRef = useRef(null);
  const isScriptLoaded = useRef(false);

  const handleGoogle = (response) => {
    // 处理你的登录逻辑
    console.log('登录返回信息:', response);
    
    // 切换账号后更新按钮状态
    if (window.google) {
      google.accounts.id.disableAutoSelect();
      renderGoogleBtn();
    }
  };

  const renderGoogleBtn = () => {
    if (!window.google || !signUpDivRef.current) return;
    
    // 清空容器，防止重复渲染按钮
    signUpDivRef.current.innerHTML = '';
    
    google.accounts.id.initialize({
      client_id: process.env.REACT_APP_GOOGLE_CLIENT_ID,
      callback: handleGoogle,
    });
    
    google.accounts.id.renderButton(signUpDivRef.current, {
      theme: "filled_black", 
      text: "continue_with",
      shape: "pill",
    });
  };

  useEffect(() => {
    if (isScriptLoaded.current) {
      renderGoogleBtn();
      return;
    }

    // 动态加载Google登录脚本
    const script = document.createElement('script');
    script.src = 'https://accounts.google.com/gsi/client';
    script.async = true;
    script.defer = true;
    
    script.onload = () => {
      isScriptLoaded.current = true;
      renderGoogleBtn();
    };
    
    script.onerror = () => {
      console.error('Google登录脚本加载失败');
    };
    
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, [handleGoogle]);

  return <div ref={signUpDivRef}></div>;
};

export default GoogleLoginButton;

关键优化点 #

• 用useRef保存容器引用和脚本加载状态，避免重复加载脚本和无效渲染。
• 动态加载脚本替代HTML静态引入，确保脚本加载完成后再执行初始化逻辑，解决刷新后按钮消失的问题。
• 登录回调中重新渲染按钮，保证按钮显示的账号信息与当前登录状态一致。

内容的提问来源于stack exchange，提问作者Blockchain Kid