React 中的无效钩子调用答案

【问题标题】：Invalid hooks calls in ReactReact 中的无效钩子调用
【发布时间】：2021-05-09 05:08:56
【问题描述】：

我有一个问题，因为我从 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>
  );
};

【问题讨论】：

标签： reactjs redux react-hooks

【解决方案1】：

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

我建议您将导出的菜单项配置为将 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>
  );
};

【讨论】：

前端你也做这种事吗？这种事情的方法是什么？谢谢
@Joseph React 是（大部分）一个前端 UI 框架，所以我猜答案是，是吗？不过，我不确定您要问什么。基于角色的访问？
是的。您是否还将令牌和角色存储在本地存储中？安全吗？
很方便。
@Joseph 当然，您可以在前端存储身份验证令牌（和角色）或类似内容，然后将令牌与后续请求一起发送到后端 API 以进行验证。

【解决方案2】：

你需要在一个组件或另一个钩子中运行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',
    },
  ];
};

从useRoles 钩子中获取items：

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>
  );
};

【讨论】：