我的 react 项目普通用户和管理员中有两种不同的用户类型，但要指定我没有使用任何数据库。所以我连接 metamask 钱包，我得到了钱包（你可以认为是一个 ID），如果钱包相等，它是管理员，否则它是普通用户。在 localStorage 中，如果管理员是 true 或 false，我会保留，并根据我想要显示的或 .但首先我的 if 语句有问题，因为它一直显示（即使在 localStorage admin 中也是错误的），其次它不是实时 rendering。所以我期待的是，当用户类型发生变化时，项目会重新呈现并显示正确的组件。这是我的组件：

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;

Container 和 Row 标签是基于 React Bootstrap 的，所以不用担心它们。但我想知道我的逻辑的其余部分是否正确以及为什么它不会重新呈现。