React Loggin Out: Как я могу выходить и изменить заголовок USERSTATE? ⇐ Javascript

[Anonymous]

Я написал компонент React Header , в котором является родитель всех компонентов, когда я успешно вхожу в него в систему имени пользователя в заголовке , но когда я вхожу в систему, то, что происходит, это то, что оно отправит меня обратно на страницу входа в систему, но подробности пользователя есть, только когда я Refresh Название пользователя и входной кнопку будет выйти из входа. Как я могу это исправить?export const UserContext = createContext()

export function UserContextProvider({children}) {
const {isAuthorized, setIsAuthorized, auth} = useContext(IsAuthenticatedContext)
const [user, setUser] = useState(null)
useEffect(()=>{
if (isAuthorized == true){
get_user()
}
})

const get_user = async() => {
try {
const res = await api.get('/api/user/')
const userData = res.data
setUser(userData)
} catch(err){
console.log(err)
}

}

return (

{children}

)

}
< /code>
Вот компонент заголовка < /p>
import { useContext, } from 'react'
import { UserContext} from '../../lib/UserContext'
import '../../styles/header.css'
import { LuBell } from "react-icons/lu";
import { useNavigate } from 'react-router-dom'
import {IsAuthenticatedContext} from '../AuthContext'

function HeaderComponent({children}){
const { user, setUser } = useContext(UserContext)

const { auth } = useContext(IsAuthenticatedContext)
const navigate = useNavigate()
const logout = async (e) => {
e.preventDefault();
localStorage.clear();
setUser(null); // Clear user state
await auth()
navigate('/login'); // Redirect
}

return (


Flexbox

• Home
• About
  { user && (
• {user.username}
• 
  Logout
  
  
  )}
• Contact

{children}

)
}

export default HeaderComponent


Подробнее здесь: https://stackoverflow.com/questions/796 ... -userstate