状态挂钩没有反应

Question

我有以下React代码，但我有一个问题：当按下注销按钮时，应该更新变量logged(因为令牌已从localStorage中删除(，但变量对更改没有反应，因此没有进行重定向。

import React, { useState, useEffect } from "react"
import { useHistory } from "react-router-dom"
import man from "../../assets/img/people/man.jpg"
const ProfileMenu = () => {
const history = useHistory()
const [logged, setLogged] = useState(localStorage.getItem('token') ? true : false)
const [isOpen, setOpen] = useState(false)
useEffect(() => {
if (!logged) {
handleRedirection()
}
})
const handleRedirection = () => {
history.push('/login')
}
const handleMenu = () => {
setOpen(!isOpen)
}
const handleCloseSession = () => {
localStorage.removeItem('token')
}
return (
<div className="dropdown">
<button 
className="profile-menu-button"
style={{
backgroundImage: `url('${man}')`
}}
onClick={handleMenu}
>
</button>
<div 
className="dropdown-content"
style={{
display: isOpen ? 'block' : 'none'
}}
>
<ul className="list">
<li>
<a>Perfil</a>
</li>
<hr/>
<li>
<a>Editar perfil</a>
</li>
<li>
<a>Editar red</a>
</li>
<hr/>
<li>
<a>Configuración de cuenta</a>
</li>
<li>
<a onClick={handleCloseSession}>Cerrar sesión</a>
</li>
</ul>
</div>
</div>
)
}
export default ProfileMenu

Answer 1

useState不会重新评估传递给函数的数据。您将不得不自己拨打setLogged。

const handleCloseSession = () => {
localStorage.removeItem('token')
setLogged(false)
}

或者你可以用这样的钩子：https://usehooks.com/useLocalStorage/