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

Question

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

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

登录.jsx：

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上的实时预览

Answer 1

通过在onClick 处理程序上添加括号，您将在加载该函数后立即调用该函数。去掉括号就可以了。

<button className="google-login" onClick={googleSignin}>
  <span className="google-image">
    <img src={googleLogo} alt="" />
  </span>
  Login with Google
</button>

Answer 2

当浏览器看到函数被调用并且没有在OnClick 方法上引用时，它会承担责任并自行调用该函数。所以，我们必须把浏览器从它的职责中解放出来，让函数只有在用户点击按钮时才被调用。

创建一个 Handler 函数以将浏览器从其职责中解放出来：

function handleClick(e) {
        e.preventDefault();
        googleSignin();
        console.log('The link was clicked.');
 }

在您的 onClick 方法中引用 handleClick：

<button className="google-login" 
  //Reference handleClick here.
  onClick={handleClick}>
    <span className="google-image">
      <img src={googleLogo} alt=""/>
    </span>
  Login with Google
</button>

这样就可以解决问题了。