时间戳

首页 > 解决方案 > 在我的反应钩子页面中单击 Google 登录按钮时，什么也没有发生

reactjs - 在我的反应钩子页面中单击 Google 登录按钮时，什么也没有发生

问题描述

单击Google Login我的反应挂钩登录中的按钮时，显示以下错误。有人可以告诉这里可能是什么问题吗？以下是警告和错误详细信息

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

现在得到一个错误：

react-dom.development.js:3832 Uncaught Error: Expected `onClick` listener to be a function, instead got a value of `object` type.``

Check the render method of `Login`.

Login.js

import React, { useRef, useEffect, useState } from "react";
import { useGoogleLogin  } from 'react-google-login';
import { refreshToken } from '../utils/refreshToken';

const clientId ="client_id_here";

const Login = () => {

    const onSuccess = (res) =>{
        console.log("Login successfully",res.profileObj);
        refreshToken(res);
    }
    const onFailure = (res) => {
        console.log('Login failed: res:', res);
        alert(
            `Failed to login.`
        );
    };
    const {signIn, loaded} = useGoogleLogin ({
        onSuccess,
        onFailure,
        clientId,
        isSignedIn: true,
        accessType: 'offline',
    })

    return (
        <div className="App">
            <h1>Login</h1>
            <div className="inputForm">
                <button onClick={()=>signIn}>
                    <img src="images/google.png" className="loginG"/>
                    <span className="loginText">Sign in</span>
                </button>
            </div>

        </div>
    )
}

export default Login;

src/utils/refreshToken.js

export const refreshTokenSetup = (res) => {
    let refreshTiming = (res.tokenObj.expires_in || 3600 - 5 * 60) * 1000;

    const refreshToken = async () => {
        const newAuthRes = await res.reloadAuthResponse();
        refreshTiming = (newAuthRes.expires_in || 3600 - 5 * 60) * 1000;
        console.log('newAuthRes:', newAuthRes);
        // saveUserToken(newAuthRes.access_token);  <-- save new token
        localStorage.setItem('authToken', newAuthRes.id_token);

        setTimeout(refreshToken, refreshTiming);
    };

    setTimeout(refreshToken, refreshTiming);
};

标签： reactjsreact-hooks

解决方案

https://github.com/anthonyjgrove/react-google-login

根据文档，我猜您正在尝试使用useGoogleLogin而不是GoogleLogin ?

检查此部分Login Hook

import { useGoogleLogin } from 'react-google-login'

const { signIn, loaded } = useGoogleLogin({
    onSuccess,
    ...
});

问题是您将 React 组件（即GoogleLogin）作为函数调用，它确实是一个函数，但只能由 React 本身调用。

推荐阅读