React CoreUI中如何实现侧边栏Chat项的动态徽章显示？

问题描述 #

侧边栏的Chat项需要在chatBadge状态为true时显示“NEW MESSAGE”徽章，无法修改原始的_nav数组，现有代码通过权限筛选生成filteredNav，需要将徽章显示与状态关联。

解决方案 #

核心思路是在生成filteredNav时，根据chatBadge状态动态为Chat项添加或移除badge属性，同时监听chatBadge变化，确保状态更新时侧边栏同步更新。

代码修改步骤 #

1. 新增状态存储允许的菜单筛选条件
   拆分原逻辑，先保存权限允许的筛选条件，避免重复请求接口：

import navigation from "./_nav";
const [filteredNav, setFilteredNav] = useState([]);
const [chatBadge, setChatBadge] = useState(false);
const [allowedFilters, setAllowedFilters] = useState([]); // 新增状态

const handleChatBadge = () => {
   setChatBadge(true)
}

2. 调整接口请求逻辑，仅保存筛选条件
   修改useLayoutEffect，只获取权限允许的筛选条件，不直接生成filteredNav：

useLayoutEffect(() => {
  allwedMenu().then((res) => {
    // 修正原代码逻辑错误：初始应存filter字符串而非整个对象
    const arr = [navigation[0].filter];
    res.data.items.forEach((element) => {
      arr.push(element.name);
    });
    setAllowedFilters(arr);
  });
}, []);

3. 根据筛选条件和徽章状态生成侧边栏数据
   添加useEffect监听allowedFilters和chatBadge变化，动态调整Chat项的徽章：

useEffect(() => {
  if (allowedFilters.length === 0) return;
  // 先筛选权限允许的菜单，再动态修改Chat项的badge
  const updatedNav = navigation
    .filter(item => allowedFilters.includes(item.filter))
    .map(item => {
      if (item.name === "Chat") {
        return {
          ...item,
          // 当chatBadge为true时显示徽章，否则移除badge属性
          badge: chatBadge ? { color: "info", text: "NEW MESSAGE" } : undefined
        };
      }
      return item;
    });
  setFilteredNav(updatedNav);
}, [allowedFilters, chatBadge]);

4. 保持原有侧边栏渲染逻辑不变
   原有的CSidebarNav和CCreateElement代码无需修改，直接使用更新后的filteredNav即可。

关键说明 #

• 通过map方法克隆原导航项，避免修改原始的_nav数组
• 利用useEffect监听chatBadge状态变化，确保状态更新时侧边栏实时响应
• 当chatBadge为false时，将badge设为undefined，CoreUI会自动隐藏徽章

内容的提问来源于stack exchange，提问作者Rahil Əliyev