Javascript 检查React中的数组中是否包含

我想根据

userAccess

有条件地隐藏菜单。我的问题是if有很多角色。 我怎样才能做到呢

请检查我下面的代码

菜单

export default [

      {
        id: 1,
        text: 'Leaders',
        url: `/leaders`,
        userAccess: true,
      },
      {
        id: 2,
        text: 'Things',
        url: `/things`,
        userAccess: 'Super Admin',
      },
      {
        id: 3,
        text: 'Users',
        url: `/users`,
        userAccess: 'Admin',
      },
      {
        id: 4,
        text: 'Products',
        url: `/products`,
        userAccess: ['Admin', 'Manager'],
      },
    ];

代码

import { useSelector } from 'react-redux';

const checkAccess = (access, role) => {
  if (typeof access === 'string') {
    return role === access;
  };
  return access;
};

const Menu = ({ items, isCollapseMenu }) => {
  const classes = useStyles();
  const role = useSelector((state) => state.role);

  return (
    <div className={classes.root}>
      {items.map(
        (item) =>
          checkAccess(item.userAccess, role) && (
            <MenuItem
              key={item.id}
              title={item.title}
              icon={item.icon}
              text={item.text}
              shortText={item.shortText}
              url={item.url}
              submenu={item.submenu}
              isCollapseMenu={isCollapseMenu}
            />
          )
      )}
    </div>
  );
};

从'react redux'导入{useSelector}；
const checkAccess=（访问，角色）=>{
如果（访问类型=='string'）{
返回角色===访问权限；
};
返回访问；
};
常量菜单=（{items，isCollapseMenu}）=>{
const classes=useStyles（）；
const role=useSelector（（state）=>state.role）；
返回(
{items.map(
（项目）=>
检查访问权限（item.userAccess、role）和(
)
)}
);
};

尝试按如下方式重新写入checkAccess函数 并确保您的角色始终位于一个数组中，该数组包含单个值或多个值

const checkAccess = (access, role) => {
  if (typeof access === 'string') {
    return role.indexOf(access) > -1;
  };
  return access;
};

---

您需要使用

includes

方法检查访问权限，并在执行以下映射之前尝试筛选数组：-

import { useSelector } from 'react-redux';

const checkAccess = (access, role) => {
  if (typeof access === 'string') {
    return role === access;
  };
  if(Array.isArray(access)){
   return access.includes(role);
 }

 return access;
};

const Menu = ({ items, isCollapseMenu }) => {
  const classes = useStyles();
  const role = useSelector((state) => state.role);

  return (
    <div className={classes.root}>
      {items.filter(itemToFilter => checkAccess(itemToFilter.userAccess, role)).map(
        (item) => (
            <MenuItem
              key={item.id}
              title={item.title}
              icon={item.icon}
              text={item.text}
              shortText={item.shortText}
              url={item.url}
              submenu={item.submenu}
              isCollapseMenu={isCollapseMenu}
            />
          )
      )}
    </div>
  );
};

从'react redux'导入{useSelector}；
const checkAccess=（访问，角色）=>{
如果（访问类型=='string'）{
返回角色===访问权限；
};
if（Array.isArray（访问））{
返回访问权限。包括（角色）；
}
返回访问；
};
常量菜单=（{items，isCollapseMenu}）=>{
const classes=useStyles（）；
const role=useSelector（（state）=>state.role）；
返回(
{items.filter（itemToFilter=>checkAccess（itemToFilter.userAccess，role））.map(
（项目）=>(
)
)}
);
};

您必须处理3种情况

绳子

排列

布尔值

const checkAccess = (access, role) => {
 if (typeof access === 'string') { // String check
    return role === access;
 };

 if(Array.isArray(access)){ //Array check
   return access.includes(role);
 }

 return access; // Boolean check
};

---

为什么不在映射之前先过滤呢？