javascript - React：当组件渲染时，Firebase auth 函数会自行调用

问题描述

目标： 我正在使用 Firebase Auth 在我的网站上通过 Google 功能登录。我想当用户单击导航栏中的登录链接时，他被重定向到登录页面，在登录页面中，有一个虚拟的电子邮件/密码输入表单和一个使用 Google 按钮登录。当用户单击“使用 Google 登录”按钮时，他应该被重定向到所有电子邮件列表，以便他可以选择他想要登录的位置。

错误： 当用户单击导航栏中的登录链接时，登录路径打开，并且会自行调用 firebase 身份验证功能，甚至无需单击 Google 登录按钮，用户就会被重定向到电子邮件列表页面。

import React from 'react'
import {Link} from "react-router-dom"
import './components/css/login.css'
import googleLogo from "./components/svg/google.svg"
import brandLogo from "./components/img/logo1.png"
//The JS for Login is in another file
import { googleSignin } from './firebase/googleLogin'

function login() {
        
        return (
            <div className="background-div" >
                <nav className="login-nav" >
                    <img src={brandLogo} alt="logo"/>
                    <h2>the<strong>Dukaandar</strong></h2>
                </nav>
                <form action="" className="login-form">
                    <h3><strong>Login into your account</strong></h3>
                    <h5 className="login-email" >Email</h5>
                    <input type="text" className="login-email-input" placeholder="Enter your email" />
                    <h5 className="login-password">Password</h5>
                    <input type="password" className="login-password-input" placeholder="Enter your password" />
                        <br />
                    <button className="login-button">Login</button>
                     <Link className="login-forgot-password">forgot password?</Link>
                         <hr />
                    // The onClick attribute in React, I expect anything to happen only after clicking this button
                    <button className="google-login" onClick={googleSignin()} > <span className="google-image"><img src={googleLogo} alt=""/></span>Login with Google</button>
                    <Link to={"/"}>Back to Home</Link>
                </form>
            </div>
            )
        
}

export default login

JS 文件：

import firebase from 'firebase'
   
const firebaseConfig = {
   // Key value pairs of my config
};

      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);

      //This is the Function which has to be called on button click
      function googleSignin() {
        var provider = new firebase.auth.GoogleAuthProvider();
        firebase
        .auth()
        .signInWithRedirect(provider)
        .then(function(result) {
       // This gives you a Google Access Token. You can use it to access the Google API.
       var token = result.credential.accessToken;
       // The signed-in user info.
       var user = result.user;
       console.log(user);
       console.log(result);

       })
      .catch(function(error) {
       console.log(error);
      
      });

    }

    export { googleSignin }

在搜索它时，我开始了解渲染组件时发生的生命周期方法，如果是这种情况，如何阻止它们调用自身？

正如下面的回答和我的发现onClick{ () => googleSignin }也不起作用，而且当我用括号调用函数时googleSignin()，该函数至少被调用但没有任何事情发生。我怀疑也可能存在 React Router 问题，但我不知道。

先感谢您

网站完整源代码在Github上，在 Netlify上实时预览

标签： javascriptreactjsfirebase-authenticationjsx

javascript - React：当组件渲染时，Firebase auth 函数会自行调用

问题描述

解决方案

推荐阅读