javascript - React:我是否错误地使用了条件渲染，因为它似乎未达到预期的效果？

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

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

在登录屏幕上，输入信息存储在会话存储中的“ AuthHelper”类中。
管理员用户必须具有“管理员”名称，否则将作为普通用户处理（出于测试目的）

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钩子“ setIsLoggedIn”，以实现App.js的整体重新呈现以显示菜单。是否将挂钩设置器传递给并调用它们，以触发对合法或坏主意的重新呈现？

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

最佳答案

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

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

它应该工作

关于javascript - React:我是否错误地使用了条件渲染，因为它似乎未达到预期的效果？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59275208/