如何根据用户类型显示正确的组件

Question

我的React Project正常用户和管理员中有两种不同的用户类型，但要指定我没有使用任何数据库。因此，我将MetAmask钱包连接起来，并且我得到了钱包（您可以将其视为ID），如果钱包相等，则它是管理员，否则是正常的用户。在LocalStorage中，如果管理员为真或错误，我要保留，并且根据我要显示的。但是首先，我的if语句有问题，因为它一直显示（即使在localstorage admin中也是false），其次不是实时渲染。因此，我期望的是，当用户类型更改时，它将重新启动并显示正确的组件。这是我的组件：

import React, { useEffect } from "react";
import { Container, Row, Col } from "react-bootstrap";
import Twitch from "../Twitch/Twitch";
import AdminGame from "./AdminGame";
import "./Game.css";
import UserGame from "./UserGame";

const Game = () => {
  useEffect(() => {
    if (
      localStorage.getItem("walletId") ==
      ""
    ) {
      localStorage.setItem("admin", true);
    } else {
      localStorage.setItem("admin", false);
    }
  }, [localStorage.getItem("walletId")]);
  return (
    <section id="game">
      <Container>
        <Row>
          <Col>
            {localStorage.getItem('admin') ? <UserGame /> : <AdminGame/>}
          </Col>
        </Row>
      </Container>
    </section>
  );
};

export default Game;

容器和行标签是基于React Bootstrap的，因此不必担心它们。但是我想知道我的其余逻辑是正确的，为什么它不呈现。

Answer 1

您应该做JSON.PARSE，以便您的评估正确。

{JSON.parse(localStorage.getItem("admin")) ? <AdminGame /> : <UserGame />}