使用 if else 条件在 React JS 上显示元素

Question

我有一些要根据用户角色显示的菜单项。我有 2 个用户角色来自数据库(1 for admin and 0 for normal user)。但是我的代码总是为普通用户返回菜单项，即使它是登录的管理员。 我还将用户详细信息存储在 useContext 中并在每个组件上调用它们

请帮助

我的代码

import React, { Component } from "react";
import { Link } from "react-router-dom";
import "./Menubar.css";
import { UserContext } from "../../UserContext";

const Menubar = () => {

const user = React.useContext(UserContext);

console.warn(user.role)

return (
<div>
  <div className="appBottomMenu">

    {user.role === 1 ? (
      <Link to="/admin/home" className="item" tabIndex="1">
        <div className="col">
          <i className="fi fi-rr-home"></i>
        </div>
      </Link>
    ) : (
      <Link to="/" className="item" tabIndex="1">
        <div className="col">
          <i className="fi fi-rr-home"></i>
        </div>
      </Link>
    )}

    {user.role === 1 ? (
      <Link className="item" to="/admin/farmers">
        <div className="col">
          <i className="fi fi-rr-users"></i>
        </div>
      </Link>
    ) : (
      <Link to="/area" className="item" tabIndex="1">
        <div className="col">
          <i className="fi fi-rr-marker"></i>
        </div>
      </Link>
    )}

    <Link to="/community" className="item">
      <div className="col">
        <i className="fi fi-rr-browser"></i>
      </div>
    </Link>


    {user.role === 1 ? (
      <Link className="item" to="/admin/farms">
        <div className="col">
          <i className="fi fi-rr-users"></i>
        </div>
      </Link>
    ) : (
      <Link to="/shop" className="item">
        <div className="col">
          <i className="fi fi-rr-shopping-cart"></i>
        </div>
      </Link>
    )}


    <Link to="/profile" className="item">
      <div className="col">
        <i className="fi fi-rr-user"></i>
      </div>
    </Link>
  </div>
</div>

 );}
    export default Menubar;

Answer 1

在上下文更新时强制更新页面的一种潜在方法是结合使用 useEffect 和 useState 挂钩以及 useContext。这是一个示例，希望对您有所帮助。

例如：

import React, { Component, useEffect, useContext, useState } from "react";
import { Link } from "react-router-dom";
import "./Menubar.css";
import { UserContext } from "../../UserContext";

const Menubar = () => {

  const { user } = useContext(UserContext);
  const [menuContext, setMenuContext] = useState(user);

  const handleSetMenuContext = (updatedMenuContext) => {
    setMenuContext(updatedMenuContext);
  };

  useEffect(() => {
    handleSetMenuContext(user);
  }, [user]);

return menuContext?.role && (
<div>
  <div className="appBottomMenu">

    {menuContext.role === 1 ? (
      <Link to="/admin/home" className="item" tabIndex="1">
        <div className="col">
          <i className="fi fi-rr-home"></i>
        </div>
      </Link>
    ) : (
      <Link to="/" className="item" tabIndex="1">
        <div className="col">
          <i className="fi fi-rr-home"></i>
        </div>
      </Link>
    )}

    {menuContext.role === 1 ? (
      <Link className="item" to="/admin/farmers">
        <div className="col">
          <i className="fi fi-rr-users"></i>
        </div>
      </Link>
    ) : (
      <Link to="/area" className="item" tabIndex="1">
        <div className="col">
          <i className="fi fi-rr-marker"></i>
        </div>
      </Link>
    )}

    <Link to="/community" className="item">
      <div className="col">
        <i className="fi fi-rr-browser"></i>
      </div>
    </Link>


    {menuContext.role === 1 ? (
      <Link className="item" to="/admin/farms">
        <div className="col">
          <i className="fi fi-rr-users"></i>
        </div>
      </Link>
    ) : (
      <Link to="/shop" className="item">
        <div className="col">
          <i className="fi fi-rr-shopping-cart"></i>
        </div>
      </Link>
    )}


    <Link to="/profile" className="item">
      <div className="col">
        <i className="fi fi-rr-user"></i>
      </div>
    </Link>
  </div>
</div>
);
}
export default Menubar;