為什么狀態沒有在 React 中更新？

Question

我有一個注冊頁面，其中注冊后，用戶被重定向到主頁。我想讓我的主頁成為只有登錄用戶才能進入的受保護路線。

我的注冊代碼：

const navigate = useNavigate();
  const handleSignup = (e) => {
    e.preventDefault();
    const email = document.querySelector('#email').value;
    const password = document.querySelector('#password').value;
    createUserWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        // Signed in 
        const user = userCredential.user;
        console.log(user);
        setcurrentuser(user);
        setTimeout(()=>{
          navigate('/homepage');
        },3000);
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        // ..
      });
  }

從firebase接收到用戶對象后，我已經為用戶設置了狀態，並且由於狀態需要時間來更新，我使用了3秒的超時來導航到主頁。當我登錄用戶對象時，我仍然沒有定義。

主頁代碼：

 const Homepage = ({user,username,setusername}) => {
    console.log(user);
    const navigate=useNavigate();
    // useEffect(()=>{
    //     if(user=={} || !user)
    //     navigate('/signup');
    // })
    return(
           <>
           ...some code here
           </>)}
export default HomePage

狀態在 app 組件中，注冊組件使用它接收到的 props 為用戶對象設置狀態。 Homepage 從 app 組件中獲取 props。

Answer 1

最好的方法是使用 useContext 而不是 props。 因為它更容易，更高效。 這是一個文檔鏈接，可以幫助您。 訪問https://betterprogramming.pub/react-hooks-and-forms-dedb8072763a

Answer 2

好的，首先，為了不在受保護的Homepage上獲得未定義或空值，您需要某種訪問用戶數據的方式，即登錄后獲得的用戶數據，

存儲這些以便在整個站點上訪問它們的主要好地方是使用此代碼在localStorage上，一旦您導航到Homepage ，您就會將存儲的用戶帶到您的localStorage

Note1： localStorage存儲原始數據沒有問題，但是對象需要先字符串化，我們很快就會講到，

注意2：等待 3 秒導航到另一個頁面在用戶體驗中非常耗時，我不建議，如果您想等待某個事件發生以觸發另一個事件並且您沒有其他方法，您可以使用javascript's零秒事件循環技巧將需要等待的函數/事件放在事件循環的nextTick上。 這是通過寫作完成的

   setTimeout(()=>{
          navigate('/homepage');
        },0); //Note that 0 second, that will place navigation on nextTick of eventLoop

現在，如果 Note2 令人困惑，請不要擔心，讓我們來解決您的問題，

注冊：

const navigate = useNavigate();
  const handleSignup = (e) => {
    e.preventDefault();
    const email = document.querySelector('#email').value;
    const password = document.querySelector('#password').value;
    createUserWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        // Signed in 
        const user = userCredential.user;
        console.log(user);
       //Edited place
        if(user){ //check if we got user object right
           localStorage.setItem('user',JSON.stringify(user));//store in global storage
           navigate('/homepage');//let go to homepage :)
        }//End of Edited 
         
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        // ..
      });
  }

就在主頁區域

const Homepage = () => {
    //console.log(user);This wont give you your user so just remove it from the props above
    const navigate=useNavigate();
      useEffect(()=>{
         let user = localStorage.getItem('user');
       if(user){
           //then we have user
           //bring her up from object stringifying..
          user = JSON.parse(user);
          //get her details if needed
          const {username, email,...} = user
       }else{ //not signed so go back
          navigate('/signup');
       }
     })
    return(
           <>
           ...some code here
           </>)
     }
export default HomePage