使用if else条件显示RectJS上的元素

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;