如何在特定條件下排除 map 中的某些項目？

Question

我正在開發一個菜單頁面，用戶可以在其中根據他們的角色查看菜單項。

目前，我有 3 個頁面：公告板、信息中心和設置

所以很自然，我有 3 個角色：管理員角色（可以訪問所有 3 個頁面）、公告板（只能訪問公告板）、信息中心（只能訪問信息中心）

所以用戶可以有不同的角色，例如，如果他們有Bulletin Board和Info Hub ，那么他們可以訪問它們，但不能訪問Settings頁面（只有“Admin Role”可以看到Settings ），所以我想隱藏我已經使用map開發和渲染的此菜單中的設置。

或者，如果用戶擁有包括Admin Role在內的所有 3 個角色，那么他們也可以看到所有內容。

我從 API 獲取loginList道具並將其傳遞到AllAppsCentre.js以確定要顯示哪些菜單項，但我只是無法弄清楚在map處執行filter或indexOf的邏輯。

在我創建的代碼框中，用戶擁有所有 3 個角色。

AllAppsCentre.js（映射 function 以顯示菜單項）

useEffect(() => {
    const loginListFromParent = loginList;

    const showAll = loginListFromParent.some(
      (item) =>
        item.permissionName.includes("Admin Role") &&
        item.permissionType.includes("view")
    );

    const showBulletin = loginListFromParent.some(
      (item) =>
        item.permissionName.includes("Bulletin Board") &&
        item.permissionType.includes("view")
    );

    const showInfoHub = loginListFromParent.some(
      (item) =>
        item.permissionName.includes("Info Hub") &&
        item.permissionType.includes("view")
    );

    if (loginListFromParent) {
      setShowAll(showAll);
      setShowBulletin(showBulletin);
      setShowInfoHub(showInfoHub);
    }
  }, [loginList]);

return (
{AllAppsCentreData
   .filter((item) => {
       .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>
           )
})}
)

AllAppsCentreData.js

import * as IoIcons from 'react-icons/io'
import * as MdIcons from 'react-icons/md'

export const AllAppsCentreData = [
    {
        title: 'Bulletin Board',
        path: '/bulletinboard',
        icon: <IoIcons.IoIosPaper size={80} />,
        className: 'row text-center apps-centre-icon'
    },
    {
        title: 'Info Hub',
        path: '/infohub',
        icon: <MdIcons.MdDeviceHub size={80} />,
        className: 'row text-center apps-centre-icon'
    },
    {
        title: 'Settings',
        path: '/settings',
        icon: <IoIcons.IoMdSettings size={80} />,
        className: 'row text-center apps-centre-icon'
    },
]

我一直在試圖弄清楚如何處理這個問題，但我想不出解決方案，如果一切都失敗了，我可能會刪除 map 方法，然后復制並粘貼我的AllAppsCentreData的項目並直接移動它而是進入AllAppsCentre頁面，這樣我就可以對菜單項進行三元操作。

如果有任何更好的方法可以使用基於角色的顯示來執行此菜單，請隨時告訴我，因為我也想學習執行此類操作的最佳方法。

Answer 1

首先，您的代碼中沒有變量負責保持當前用戶的權限（或者我看不到）。 所以我編造了：

const currentUsersPermissions = useGetPermissions() // get users permissions
// the above can be "admin", "bulletin" or "info-hub"

然后，您需要先filter您的陣列，然后過濾map它（目前，您在filter內部使用map ）。 為了更容易和正確地做到這一點，您可以向您的AllAppsCentreData對象添加一個名為requiredPermission （或類似的東西）的屬性：

{
    title: 'Bulletin Board',
    path: '/bulletinboard',
    icon: <IoIcons.IoIosPaper size={80} />,
    className: 'row text-center apps-centre-icon',
    requiredPermission: "bulletin" // and info-hub for Info Hub
},

然后，在渲染和映射時，您可以這樣做：

return (
{AllAppsCentreData
   .filter(
       // below, you return true if permission is admin because he can see everything
       // and true or false depending if permissions are other than that but
       // the same as required by AllAppsCentreData array objects
       (item) => currentUsersPermissions === "admin" ? true : currentUsersPermissions === item.requiredPermission
   ).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>
       )
)

所以，總結一下：

1. 我創建了一個變量來保存當前用戶的權限
2. 我為每個 AllAppsCentreData 的對象添加了一個屬性，其中包含有關顯示它所需的權限的信息
3. 我在映射和渲染之前過濾了數組，所以它只包含我想要渲染的數據
   另外，我認為您在使用filter方法時迷失了方向，所以也許閱讀這篇文章並嘗試做一些更簡單的練習來了解它是如何工作的： MDN on Array.filter method 。 您需要注意的是，您將 function 傳遞給filter ，這個 function 應該返回true或false ，具體取決於您是否希望您的項目包含在 Z78E6221F6393D13566681DB398F14 數組中。