首先，我们先搞定你当前map渲染场景下的菜单过滤逻辑，再给你一个更易维护的优化方案。

一、快速解决当前的filter逻辑问题 #

你已经在useEffect里拿到了showAll、showBulletin、showInfoHub三个状态，只需要在filter里根据菜单标题匹配对应的权限状态即可：

.filter((item) => {
  // 管理员直接显示所有菜单
  if (showAll) return true;
  
  // 非管理员的情况，按页面判断权限
  const permissionCheck = {
    'Bulletin Board': showBulletin,
    'Info Hub': showInfoHub,
    'Settings': false // 仅管理员可见
  };
  
  return permissionCheck[item.title] || false;
})

这样就能准确过滤出用户有权访问的菜单选项了。

二、更优雅的权限控制方案（推荐） #

上面的方法虽然能解决问题，但维护多个状态变量（showAll、showBulletin等）不够灵活——以后新增页面或角色时，你得不断新增状态和判断逻辑。我们可以把权限判断封装成一个独立函数，直接在filter里调用，彻底摆脱状态维护的麻烦：

1. 移除原来的useEffect和相关状态变量，新增权限判断函数：

const hasPageAccess = (pageTitle) => {
  // 处理权限列表为空的边界情况
  if (!loginList || loginList.length === 0) return false;
  
  // 先判断是否拥有管理员权限（管理员能访问所有页面）
  const isAdmin = loginList.some(item => 
    item.permissionName.includes("Admin Role") && item.permissionType.includes("view")
  );
  if (isAdmin) return true;
  
  // 非管理员，判断是否拥有当前页面的访问权限
  return loginList.some(item => 
    item.permissionName.includes(pageTitle) && item.permissionType.includes("view")
  );
};

2. 简化filter逻辑：

return (
  {AllAppsCentreData
    .filter(item => hasPageAccess(item.title))
    .map((item, index) => {
      return (
        <Col key={index} xs={6} md={3}>
          <div className={item.className}>
            <Link to={item.path}>
              {item.icon}
              <Row>
                <span className='apps-title'>
                  {item.title}
                </span>
              </Row>
            </Link>
          </div>
        </Col>
      )
    })}
)

三、关于你考虑的“直接复制代码用三元运算符”的方案 #

这种方式虽然能实现功能，但缺点很明显：

• 代码冗余，新增页面时需要手动添加大量三元判断
• 权限逻辑分散在JSX中，后期修改或排查问题非常麻烦
• 不符合DRY（Don't Repeat Yourself）原则，维护成本高

而上面推荐的封装函数+filter的方式，不仅逻辑集中易维护，以后新增页面或角色时，只需要在AllAppsCentreData里添加新菜单，同时保证后台API返回对应的权限数据即可，前端不需要额外修改判断逻辑。

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