React中如何动态设置useGoogleLogin的hint属性？

问题核心 #

你遇到的问题是：

• 组件初始化时currentUser.email为空，直接赋值hint无效
• 无法在回调中调用useGoogleLogin（违反React Hook调用规则）
• 多Google用户会话场景下，必须指定hint才能确保后台刷新令牌时匹配正确账户

解决方案 #

react-oauth的useGoogleLogin返回的登录函数支持动态传入配置参数，可以覆盖Hook初始化时的固定配置。利用这个特性，你能在调用登录函数时动态传入当前用户的邮箱作为hint，完全符合Hook规则且能实现动态更新。

修改后的代码示例 #

export const GoogleLoginButton: React.FC<GoogleLoginButtonProps> = ({onSuccessfulLogin, onFailedLogin }: GoogleLoginButtonProps) => {

    const {currentUser, setCurrentUser} = useContext(LoginContext)

    const updateUserInContext = async (response: any) => {
        let googleUser = // 保留你获取Google用户信息的原有逻辑

        const user = new User()
        user.accessToken = response.access_token
        user.email = googleUser.email
        user.isUserLoggedIn = true
        setCurrentUser(user)
    
        // 调用登录函数时动态传入当前用户邮箱作为hint
        loginWithCurrentUser({ hint: user.email })
    } 

    // 初始化时无需固定hint，留空或设默认值即可
    const loginWithCurrentUser = useGoogleLogin({
        onSuccess: (codeResponse: any) => {
            updateUserInContext(codeResponse)
        },
        onError: (error:any) => {
            console.error(error)
            // 处理登录失败逻辑
        },
        prompt:'none'
    })
    
    const login = useGoogleLogin({
        onSuccess: async codeResponse => {
            await updateUserInContext(codeResponse)
            try {
                onSuccessfulLogin()
            } catch (error) {
                onFailedLogin(error)
            }
        }, 
        onError: error => {
            console.log("error")
            onFailedLogin(error)
        },
        flow:'implicit'
    });
      
    return (
        <div>
            <button onClick={() => login()}>
                Sign in with Google 🚀{' '}
            </button>
            {/* 若需手动触发已登录用户的令牌刷新，调用时同样动态传hint */}
            {currentUser?.isUserLoggedIn && (
                <button onClick={() => loginWithCurrentUser({ hint: currentUser.email })}>
                    刷新Google令牌
                </button>
            )}
        </div>
    )
}

export interface GoogleLoginButtonProps {
    onSuccessfulLogin: () => void,
    onFailedLogin: (error: any) => void
}

关键改动说明 #

1. 移除固定hint配置：初始化useGoogleLogin时不再写死hint值，改为动态传入
2. 调用时传参覆盖配置：调用登录函数时通过{ hint: currentUser.email }传入当前用户邮箱，覆盖初始配置
3. 优化类型定义：将Props中的Function改为更严谨的函数类型（可选，但提升代码规范性）

原理说明 #

react-oauth的useGoogleLogin返回的函数允许接收可选配置对象，该对象会与Hook初始化时的配置合并，优先使用传入的动态参数。这种方式既遵守了React Hook的调用规则，又完美实现了hint的动态更新需求。

内容的提问来源于stack exchange，提问作者Sara Menoncin