使用firebase作為身份驗證器登錄時，用戶會立即注銷反應

我是 react/firebase 的新手，我最近一直在從事一個專案，該專案涉及用戶登錄網站以訪問導航欄的不同方面，但是由于某種原因，每次用戶登錄時，他們都是簡要顯示正確的導航欄以及已登錄，但不久之后，它們被注銷并發送回登錄頁面。除錯代碼，我發現由于某種原因，一旦用戶點擊登錄按鈕，handleSignout 函式就會與handleform 提交函式一起運行。

附件是我的導航欄以及注銷功能，因為其中包含注銷按鈕。當我從退出按鈕中洗掉 onClick = {handleSignout()} 時，用戶不會立即退出，但它破壞了擁有該按鈕的目的。

import {
  Nav,
  NavLink,
  Bars,
  NavMenu,
  NavBtnLink,
} from './Navbar';
import { auth, fdb } from '../../firebase';
import { signOut } from 'firebase/auth';
import { updateDoc, doc } from 'firebase/firestore';
import { useContext } from 'react';
import { AuthContext } from '../../context/auth';
import { useNavigate } from 'react-router-dom';

const Navbar = () => { 
  const Navigate = useNavigate();
  const {user} = useContext(AuthContext);
  
  const handleSignout = async() => {
    await updateDoc(doc(fdb,'users', auth.currentUser.uid), {
      isOnline: false,
    });
    await signOut(auth);
    Navigate('/Login')
  };
  return(

    <Nav>
      <NavLink to='/'>
        <h1>logo</h1>
      </NavLink>
          {user ? (
            <>
          
          <Bars />
          <NavMenu>
            <NavLink to= '/Listings'>
                Listings
            </NavLink>
            <NavLink to= '/Post'>
                Post
            </NavLink>
            <NavLink to= '/contact'>
                Contact
            </NavLink>
            <NavLink to= '/profile'>
                Profile
            </NavLink>
            <NavBtnLink to='/' onClick={handleSignout()}>
                Log Out
            </NavBtnLink>
          </NavMenu>
          </>
          ) : (
          <>  
              <NavMenu>
              <NavBtnLink to='/Login'>
                  Log In / Register
              </NavBtnLink>
          </NavMenu>

          </>
          )}
          
        </Nav>
  )
};


export default Navbar;

這是我的 login.js

import React from 'react'
import { useRef, useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import { auth, fdb } from '../firebase'
import { signInWithEmailAndPassword } from 'firebase/auth'
import { updateDoc, doc } from 'firebase/firestore'

const Login = () => {
  const emailRef = useRef();
  const errRef = useRef();

  const [email, setEmail] = useState('');
  const [pwd, setPwd] = useState('');
  const [errMsg, setErrMsg] = useState('');
  const Navigate = useNavigate();

  
  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const userinfo = await signInWithEmailAndPassword(auth,email,pwd);
      await updateDoc(doc(fdb, 'users', userinfo.user.uid),{
        isOnline: true,
      })
      Navigate('/')
    } catch (e) {
      alert(e)
    }

    
  }

  return (
    <div> 
      <div className="loginBody">
        <p ref = {errRef} className= {errMsg ? "errmsg" : "offscreen"} aria-live="assertive">{errMsg}</p>
        <h1 className='loginHeader'>Login</h1>
        <form onSubmit={handleSubmit}>
          <div className="email">
            <label htmlFor="email" id='userLabel'>Email</label>
            <br/>
            <input 
              type="text" 
              id="email" 
              ref = {emailRef} 
              autoComplete = "off" 
              onChange = {((e)=> setEmail(e.target.value))} 
              value={email}
              required
              />
          </div>
          <div className="pwd">
            <label htmlFor="password">Password</label>
            <br/>
            <input 
              type="password" 
              id="password" 
              autoComplete = "off" 
              onChange = {((e)=> setPwd(e.target.value))} 
              value={pwd}
              required
              />
         </div>
         <button id='signIn'>Sign In</button>
        </form>
        <p className='needAcc'>
          Need an Account? <br/>
          <span className="line">
            <Link to="/Register" id='signUpLink'>Sign Up</Link>
          </span>
        </p>
      </div>
    </div>
  )
}

export default Login

uj5u.com熱心網友回復：

這段代碼：

<NavBtnLink to='/' onClick={handleSignout()}>

應該：

<NavBtnLink to='/' onClick={handleSignout}>

通過添加括號 ( ())，您將立即呼叫handleSignout，而不是僅在用戶單擊按鈕時呼叫。

另請參閱有關處理事件的 ReactJs 檔案。

標籤：javascript 反应 火力基地 firebase 身份验证

上一篇：如何檢查一個字符是否在一個字符范圍內？

下一篇：使用python從文本/javascript中提取資料