Question

我遇到了问题，因为我从 redux 获取 userAccess。我需要确定它是否是管理员。我的问题是它不在钩子内，所以我无法获得 redux 值。

下面是我的代码

代码

 import { useSelector } from 'react-redux';
    const role = useSelector((state) => state.role);
    
    export default [
      {
        id: 1,
        text: 'Leaders',
        url: `/leaders`,
        userAccess: true,
      },
      {
        id: 2,
        text: 'Users',
        url: `/users`,
        userAccess: role === 'Admin',
      },
    ];

代码

const Menu = ({ items, isCollapseMenu }) => {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      {items.map(
        (item) =>
          item.userAccess && (
            <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>
  );
};

Answer 1

您需要在组件或另一个钩子中运行 useSelector()。您可以创建一个返回角色数组的自定义钩子 (useRoles)，并在组件中使用它：

const useRoles = () => {
  const role = useSelector((state) => state.role);

  return [{
      id: 1,
      text: 'Leaders',
      url: `/leaders`,
      userAccess: true,
    },
    {
      id: 2,
      text: 'Users',
      url: `/users`,
      userAccess: role === 'Admin',
    },
  ];
};

从 items 钩子获取 useRoles：

const Menu = ({ isCollapseMenu }) => {
  const items = useRoles();
  const classes = useStyles();

  return (
    <div className={classes.root}>
      {items.map(
        (item) =>
          item.userAccess && (
            <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>
  );
};

Answer 2

您是对的，不能在 React 功能组件或自定义 React 钩子之外单独使用 useSelector 钩子。

我建议您将导出的菜单项配置为将 userAccess 设置为布尔值或角色值，并在 Menu 组件中访问您的 redux 状态。

菜单项

export default [
  {
    id: 1,
    text: 'Leaders',
    url: `/leaders`,
    userAccess: true,
  },
  {
    id: 2,
    text: 'Users',
    url: `/users`,
    userAccess: 'Admin',
  },
];

菜单

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 中的无效钩子调用

2 个答案: