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

我的 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 的,所以不用担心它们。但我想知道我的逻辑的其余部分是否正确以及为什么它不会重新呈现。

回答1

你应该做 JSON.parse 以便你的评估是正确的。

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

相似文章

javascript - 伊朗平均成绩 Regex

我需要一个regex来处理伊朗平均成绩,regex应该涵盖所有这些规则数字范围应在0到20之间。数字可以是十进制,但20除外。整数部分和小数部分应包含一或两个数字。如果您使用“。”你应该至少有一个十进...