使用@react-oauth/google登录时遇解构错误及回流问题求助

1. 修复"Cannot destructure property 'name' of 'response.profileObj' as it is undefined"错误 #

@react-oauth/google 基于新版Google Identity Services构建，响应结构和旧版gapi完全不同，不存在profileObj字段，正确的用户信息直接存放在response.user对象中。

修改Login.js中的登录回调逻辑：

// 错误写法（依赖旧版gapi结构）
const handleLoginSuccess = (response) => {
  const { name, email } = response.profileObj; // 此处会触发报错
  // ... 跳转首页逻辑
};

// 正确写法（适配@react-oauth/google）
const handleLoginSuccess = (response) => {
  const { name, email, picture } = response.user;
  // 可将用户信息存入本地存储或状态管理
  localStorage.setItem('currentUser', JSON.stringify({ name, email }));
  // 跳转到首页
  window.location.href = '/';
};

同时确保GoogleLogin组件的基础配置正确：

import { GoogleLogin } from '@react-oauth/google';

function Login() {
  return (
    <GoogleLogin
      clientId="你的Google客户端ID"
      onSuccess={handleLoginSuccess}
      onError={() => console.log('登录失败，请重试')}
      cookiePolicy="single_host_origin"
    />
  );
}

2. 消除"Forced reflow while executing JavaScript"错误 #

这个错误是因为你额外引入了gapi，与@react-oauth/google的内置实现冲突，触发了不必要的布局回流。@react-oauth/google已经封装了Google Identity Services的全部功能，不需要手动引入gapi，直接移除所有gapi相关代码即可：

• 删除import gapi from 'gapi-client'或类似的gapi引入语句
• 删除任何gapi初始化代码（比如gapi.load('auth2', () => { ... })这类逻辑）

额外检查项 #

• 确认Google Cloud控制台中，你的客户端ID已正确配置当前域名的授权回调地址
• 执行npm update @react-oauth/google更新依赖，确保使用最新版本的包

内容的提问来源于stack exchange，提问作者billy b