React超出最大更新深度|useEffect與來自firebase的用戶一起使用

我收到了在某些隨機情況下超過的最大更新深度。我正在使用 useEffect 鉤子在未通過身份驗證時將用戶導航到登錄螢屏，并在他通過身份驗證并嘗試訪問登錄螢屏時將他導航到主頁。我正在從 firebase useAuthState 獲取用戶。

這是登錄頁面代碼

import React, { useState, useEffect } from 'react';
import { Link, useNavigate } from "react-router-dom";
import {
  getAuth,
  signInWithEmailAndPassword,
} from "firebase/auth";
import { useAuthState } from "react-firebase-hooks/auth";
import { auth } from "../Firebase";


function Login (){
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [user, loading] = useAuthState(auth);
  const navigate = useNavigate();

  const handleEmailChange = (e) => {
    setEmail(e.target.value);
  };
  const handlePasswordChange = (e) => {
    setPassword(e.target.value);
  };  
  const handleLogin = () => {
      const auth = getAuth();
      signInWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        localStorage.setItem('email', auth.currentUser.email);
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        console.log(errorCode);
        console.log(errorMessage);
      });
    };

    useEffect(() => {
      if (user) navigate("/home");
    }, [user, loading, navigate]);
    
    return (
    <div class="fill-window login-bg">
      <div class="container login-container">
        <h1 class="login-h1"> Bienvenu ! </h1>
        <h2 class="login-h2"> Connectez-vous pour entrer dans votre espace virtuel </h2>
        <div class="row login-row1">
          <div class="col">
            <label for="inputEmail4" class="form-label label-login">Mail</label>
            <input type="email" 
              class="form-control login-input" 
              id="inputEmail4" 
              value={email}
              onChange={handleEmailChange}/>
          </div>
        </div>
        <div class="row login-row2">
          <div class="col">
            <label for="userPassword" class="form-label label-login">Mot de passe</label>
            <input type="password" 
              class="form-control login-input" 
              id="userPassword" value={password} 
              onChange={handlePasswordChange}/>
          </div>
        </div>
        <div style={{textAlign: "center", paddingTop: "2rem"}}>
        <button class="btn btn-light login-button" onClick={handleLogin}>SE CONNECTER</button>
        </div>
        <div class="row login-link-row">
          <div class="login-page-links">
          <Link to="/forgotPassword" class="link-dark forgot-password">Mot de pass oublié?</Link>
          </div>
          <div class="login-page-links">
          <Link to="/signup" class="link-dark signup">Créér une compte</Link>
          </div>
        </div>
      </div>
      </div>
    );
}
export default Login;

這是主頁代碼

import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import {Link} from "react-router-dom";
import MyCarousel from './MyCarousel';
import {
    getAuth,
    signOut,
  } from "firebase/auth";
import { useAuthState } from "react-firebase-hooks/auth";

function HomePage() {
    const auth = getAuth();
    const [user, loading] = useAuthState(auth);  
    const navigate = useNavigate();
    const HandleSignout = () => {
        signOut(auth).then(() => {
            localStorage.removeItem('email');
          }).catch((error) => {
            console.log('could not sign-out due to '   error)
          });
    }
   useEffect(() => {
     if (!user) return navigate("/login");
   }, [user, loading, navigate]);
    
    return (
        <div class='communication-main-container'>
            <div class='communication-display'>
                <MyCarousel/>
            </div>
            <button onClick={HandleSignout}>Log out</button>
            <Link to="/communication">Navigate</Link>
        </div>
    );
}
export default HomePage;

uj5u.com熱心網友回復：

發生這種情況是因為當這些值中的任何一個發生變化時，它會將login用戶重定向到頁面，而當上述值發生變化時，它會將用戶重定向到頁面，所以基本上它會進入無限回圈。homeuser, loading, navigatehomelogin

因此，更改兩個組件中的依賴陣列：

登錄頁面組件

useEffect(() => {
  if (user) navigate("/home");
}, [user])

主頁組件

useEffect(() => {
   if (!user) return navigate("/login");
}, [user]);

標籤：反应 火力基地

上一篇：vue firebaseauth輸出console.logofauth/internal-error而不是auth/invalid-password

下一篇：微信小程式登錄獲取手機號 后臺C#流程代碼