Заголовок React не будет отображать данные пользователя после входа в систему ⇐ Javascript

[Anonymous]

Здесь, в моей проблеме реагирования, я попытался создать контекст в целях, чтобы получить данные пользователя после входа на страницу входа в систему. /> import { useState, createContext, useEffect } from 'react'
import api from '../api.js'
import logged from './get_user.js'

// eslint-disable-next-line react-refresh/only-export-components
export const UserContext = createContext()

export function UserProvider({children}){
const [user, setUser] = useState(null)

const fetchUser = async () => {
try {
const res = api.get('/api/user')
const data = res.data
setUser(data)
console.log('User data: ', data)
}catch(err){
setUser(null)
console.log(err)
}
}
console.log(user)

useEffect(()=>{
if (logged) {
fetchUser
}
})
return (


{children}


)
}

< /code>
app.jsx
function RegisterAndLogout(){
localStorage.clear() // Clear the Access Token Before Register
return
}
function App() {

return (




... Some routes



)
}

export default App
< /code>
form.jsx для входа в систему < /p>
function Form({route, method}) {
const [username, setUsername ] = useState('')
const [password, setPassword ] = useState('')
const [loading, setLoading] = useState(false)
const { fetchUser } = useContext(UserContext)

const navigate = useNavigate()
const name = method === 'login' ? "Login" : "Register"
const handleSubmit = async (e) => {
// Submission set Loading to True
setLoading(true)
e.preventDefault()

try {
const res = await api.post(route, {username, password})
if (method === 'login') {
localStorage.setItem(ACCESS_TOKEN, res.data.access)
localStorage.setItem(REFRESH_TOKEN, res.data.refresh)
logged(true)
await fetchUser
navigate('/')
} else {
navigate('/login')
}
} catch(error) {
alert(error)
} finally {
setLoading(false)
}

}
return ( SomeJSX and user.username, )

< /code>
После входа в систему он пройдет истину
forged function < /p>
export function logged(logged){
return logged ? true : false
}

< /code>
Компонент заголовка, где он должен отображать < /p>

function HeaderComponent(){
const { user, setUser } = useContext(UserContext)
console.log(user) nothing will pop out
const navigate = useNavigate()
return (
Some Code
)

< /code>
У вас есть решение для этого? Я делаю это неправильно?>

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