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

Question

我在我的 React 项目中有两种不同的用户类型普通用户和管理员，但指定我没有使用任何数据库。所以我连接了 metamask 钱包，我得到了钱包（你可以认为是一个 Id），如果钱包相等，它就是管理员，否则就是普通用户。在 localStorage 中，我保留管理员是真还是假，并根据我想显示的 or 。但首先我的 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;

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

Answer 1

你应该JSON.parse这样你的评价才正确。

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

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

How to show the correct component according to the user types

rendering

reactjs

metamask

react-component