ReactJS角色菜单渲染异常求助：管理员登录仍显示普通用户菜单

数据库定义两种用户角色：1代表管理员，0代表普通用户。我希望根据用户角色展示不同菜单项，但代码始终显示普通用户菜单，即便是管理员登录的情况。用户信息已存储在useContext中，每个组件都会调用该Context。

代码如下：

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;

1. 修复角色值的类型匹配问题 #

最常见的原因是数据库返回的role是字符串类型（比如"1"），但代码里用全等===和数字1比较，导致判断不成立。可以通过以下方式修改：

• 改用非全等==：user.role == 1
• 把角色转成数字后再比较：Number(user.role) === 1
• 直接和字符串比较：user.role === "1"

修改后的示例片段：

{Number(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>
)}

2. 确认UserContext的状态更新逻辑 #

• 检查登录流程：登录成功后，是否正确把包含role的用户信息存入Context状态。比如Context提供者中的setUser是否被调用，传入的用户对象里role值是否为管理员的1。
• 检查Context初始值：避免初始值硬设role: 0，导致登录后未覆盖旧值。

3. 通过控制台输出定位问题 #

查看console.warn(user.role)的打印结果：

• 如果输出undefined：说明Menubar组件未被UserContext.Provider包裹，无法获取用户信息。
• 如果输出字符串"1"：对应上面的类型匹配问题。
• 如果输出0：说明登录后Context中的角色未更新为管理员权限。

4. 确保组件在Context提供者范围内 #

确认Menubar组件的父级（或更高层级）已经被UserContext.Provider包裹，否则useContext会拿到Context的默认值，而非登录后的用户信息。

内容的提问来源于stack exchange，提问作者John Mark