React 中的侧边栏菜单在热构建之前不会更新

Question

我有一个侧边栏，通过一系列菜单项填充。下面是 data.jsx 的代码

import AdminPanelSettingsOutlined from "@mui/icons-material/AdminPanelSettingsOutlined";
import React, { useState, useEffect } from 'react';
import {
  HomeIcon,
  LayoutIcon,
  CalendarIcon,
  InvoiceIcon,
  UserIcon,
  RolesIcon,
  PagesIcon,
  AuthIcon,
  WizardIcon,
  ModalIcon,
} from "./Icons";
import keycloakService from "../KeycloakService"
export const SIDEBAR_DATA = [
  {
    id: 1,
    name: "Home",
    path: "/secured",
    icon:<HomeIcon/>,
    visibility: 'true'
  },
  {
    id: 2,
    name: "Administration",
    path: "/Administration",
    icon:<AdminPanelSettingsOutlined/>,
    visibility: await keycloakService.hasRole(['NexaAdmin']) == true ? 'true' : 'false'
    
  },
  
];

在 Sidebaritems.jsx 中调用 data.jsx

import React, { useState } from "react";
import { Link } from "react-router-dom";
import {
  ItemsList,
  ItemContainer,
  ItemWrapper,
  ItemName,
} from "./SidebarStyles";

import { dummyData } from "..";

const SidebarItems = ({ displaySidebar }) => {
  const [activeItem, setActiveItem] = useState(0);
  const [showItem, setShowItem] = useState(false);

  return (
    <ItemsList>
      {dummyData.map((itemData, index) => (
        
        itemData.visibility == 'true' && <ItemContainer
          key={index}
          onClick={() => setActiveItem(itemData.id)}
          className={itemData.id === activeItem ? "active" : ""}

        >

          <Link to={itemData.path}>
            <ItemWrapper>
              {itemData.icon}
              <ItemName displaySidebar={displaySidebar}>
                {itemData.name} {itemData.visibility}
              </ItemName>
            </ItemWrapper>
          </Link>
        </ItemContainer>
      ))}
    </ItemsList>
  );
};

export default SidebarItems;

我的问题是菜单项的渲染没有考虑 data.jsx 中的可见性角色。只有在我做了一些小的更改并保存后，它才会更新，这几乎是一个热更新。任何想法我的代码可能有什么问题。如果需要可以提供更多代码

Answer 1

您应该检查可见性变量的值（尝试console.log）

因为你的承诺可能无法兑现，而未兑现的承诺是真实的