javascript - react : Am I using conditional rendering wrongly as it seems to not evaluate as expected?

Question

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

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

在登录屏幕上，输入信息存储在 session 存储中的“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.js传递的setter钩子(Hook)“setIsLoggedIn”来实现App.js整体的重新渲染以显示菜单。将钩子(Hook) setter 传递给它们并调用它们来触发合法的重新渲染还是一个坏主意？

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

Answer 1

很可能在 session 存储中所有值都保存为字符串:字符串“true”或字符串“false”，并且当您将字符串转换为 bool 类型时，字符串始终返回 true，因此只需更改条件即可

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

它应该可以工作