反应:我是否错误地使用了条件渲染，因为它似乎没有按预期评估?

Question

我有一个小应用程序，我想为登录的用户/管理员帐户以不同的方式呈现组件。

例如，对于普通用户，我希望有标题菜单"User1"和"User2"，对于管理员用户"Admin1"，"Admin2"，...

在登录屏幕上，输入信息存储在会话存储中的"AuthHelper"类中。 管理员用户的名称中必须包含"admin"，否则将作为普通用户处理(用于测试目的(

export default class AuthHelper {

login = (username, password, cb) => {
window.sessionStorage.setItem("username", username)
window.sessionStorage.setItem("password", password)
let isAdmin = username.includes("admin") ? true:false
window.sessionStorage.setItem('adminState', isAdmin)
setTimeout(() => {
cb()
}, 100);
}
logout = (cb) => {
window.sessionStorage.clear()
setTimeout(() => {
cb()
}, 100);
}
isLoggedIn = () => {
if (window.sessionStorage.getItem('username') == null) {
return false
}
return true
}
isAdmin = () => {
return window.sessionStorage.getItem('adminState')
}
}

在 App.js 中，我首先想仅为登录的管理员用户呈现我的标题菜单：

function App() {
const auth = new AuthHelper()
const [isLoggedIn, setIsLoggedIn] = useState(false)
useEffect(() => {
})
return (
<div>
<BrowserRouter>
<header>
<div className="header-title">
<h1>Service</h1>
</div>
<div className="header-links">
{
//window.sessionStorage.getItem('adminState') && 
auth.isAdmin() &&
(
<ul className="menu-list">
<Link to="/overview">Admin1</Link>
<Link to="/order">Admin2</Link>
<Logout setIsLoggedIn={setIsLoggedIn} />
</ul>
)
}
</div>
...

但是，即使auth.isAdmin()在登录控制台时正确返回 false(普通用户登录时(，菜单 始终显示。我在这里错过了什么？我将如何继续根据用户登录状态显示不同的标题菜单？

此外，"Auth"方法中的回调函数是否需要延迟 100 毫秒，或者它们实际上毫无意义？传递的"cb"函数调用传递的App的setter钩子.js"setIsLoggedIn"来实现App的重新渲染.js整体来显示菜单。将钩子设置器传递到并调用它们以触发合法的重新渲染还是坏主意？

很高兴收到任何建议和反馈！

Answer 1

最有可能在会话存储中将所有值保存为字符串：字符串"true"或字符串"false"，并且当您将其转换为布尔类型时，字符串始终返回 true，因此只需更改条件即可

isAdmin = () => {
return window.sessionStorage.getItem('adminState') === 'true'
}

它应该工作