我有一个react应用程序，它有两个组件和一个状态，可以监视用户是否登录。当用户成功登录时，状态的值将从“NotLoggedin”更改为用户的电子邮件，然后将显示用户的信息组件并隐藏“Login/Signin”组件。当用户成功创建帐户时，他们将不得不手动登录，而不是自动登录。为了实现这一点，我尝试在createUserWithEmailAndPassword之后使用signOut（）方法。当我成功地注销用户时，有一个短暂的时刻，用户的信息组件在被“signIn”组件替换之前显示出来，这是我不希望的。我们有没有办法避免这种短暂的过渡？非常感谢您的光临。

import MyAccountTitle from "./MyAccountTitle";
import classes from "./Style/MyAccount.component.module.css"
import Signin from "./SignIn"
import MyAccountDetailAccordion from "./MyAccountDetail.component";
import {useState, useEffect, useRef} from 'react'
import { auth } from "../../api/firebase.util"; 
import { createUserWithEmailAndPassword, signOut, signInWithEmailAndPassword, updateProfile} from "firebase/auth";
import { async } from "@firebase/util";


function MyAccount(props){
    
    const [LoginorRegister, SetState] = useState("Login")
    const [myAccountSelection, ChooseMenu] = useState("Personal Info")
    const [accountState, setAccountState] = useState("NotLoggedin")
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
    const [username, setUserName] = useState('')
    
    useEffect(()=>{
        auth.onAuthStateChanged(currentUser=>{
            if (currentUser){
                setAccountState(currentUser.email)
            }
            else{
                setAccountState("NotLoggedin")
            }  
        }) 
    }, [])

 

    const receivingEmailInput = (event)=>{
        setEmail(event.target.value)
    }

    const receivingPasswordInput = (event)=>{
        setPassword(event.target.value)
    }

    const receivingUserName = (event) =>{
        setUserName(event.target.value)
    }

    const creatingNewUser = async ()=>{
        await createUserWithEmailAndPassword(auth, email, password)
        await updateProfile(auth.currentUser, {
            displayName: username
        })
        await signOut(auth)
        
    }

    const signUserIn = async ()=>{
        const user = await signInWithEmailAndPassword(auth, email, password)
        
        
    }

    const signUserOut = async (event)=>{
        event.preventDefault()
        await signOut(auth)
        
    }
    
    

    const onSelectingLogin = ()=>[
        SetState("Login")
    ]
    const onSelectingRegister = ()=>{
        SetState("Register")
    }

    const onSelectingPersonalInfo = ()=>{
        ChooseMenu("Personal Info")
    }
    const onSelectingAddressList = ()=>{
        ChooseMenu("Address List")
    }
    const onSelectingPastOrders = ()=>{
        ChooseMenu("Past Orders")
    }

    const selectionMenuNotLoggedIn = [{text: "Login", function: onSelectingLogin}, {text: "Register", function: onSelectingRegister}]

    const selectionMenuLoggedIn = [{text: "Personal Info", function: onSelectingPersonalInfo}, {text: "Past Orders", function: onSelectingPastOrders}, {text: "Address List", function: onSelectingAddressList}, {text: "Sign Out", function: signUserOut}]


    return (
        <main className={classes.main} >
          <MyAccountTitle userName = {auth.currentUser?.displayName} signOut={signUserOut} chosenMenu = {accountState != "NotLoggedin" ? myAccountSelection : null} accountState = {accountState} menu={accountState === "NotLoggedin" ? selectionMenuNotLoggedIn : selectionMenuLoggedIn}/>

          {accountState === "NotLoggedin" ? <Signin receivingUserName={receivingUserName} receivingEmailInput={receivingEmailInput} receivingPasswordInput={receivingPasswordInput} creatingNewUser={creatingNewUser} signUserIn={signUserIn}  currentState={LoginorRegister} /> : <MyAccountDetailAccordion userName = {auth.currentUser.displayName}  currentState ={myAccountSelection}/> }
          
        </main>
    );
}

export default MyAccount

字符串