在我的权限上下文提供程序的函数错误中调用了 React 钩子“useSelector”

Posted 2023-04-14

【中文标题】在我的权限上下文提供程序的函数错误中调用了 React 钩子“useSelector”

【英文标题】：React hook "useSelector" is called in function error for my permissions context provider

【发布时间】：2020-08-15 12:05:17

【问题描述】：

我正在尝试创建一个包含 react-redux 全局状态的权限提供程序。我有如下：

import React,  useCallback  from 'react';
import  useSelector  from 'react-redux';
import  createSelector  from 'reselect';

export const PermissionsContext = React.createContext();

const getUserAbilities = createSelector(
  state => state.user.abilities,
  abilities =>
    abilities.reduce((acc, val) => 
      acc[val] = true;
      return acc;
    , )
);

function useAbilities() 
  const abilities = useSelector(getUserAbilities);
  return  abilities ;


export const PermissionsProvider = ( children ) => 
  const  abilities  = useAbilities();
  const can = useCallback((...permissions) => permissions.every(permission => permission in abilities), [
    abilities
  ]);
  return <PermissionsContext.Provider value= can >children</PermissionsContext.Provider>;
;

export const withPermissions = WrappedComponent => 
  return class ComponentWithPermissions extends React.Component 
    render() 
      return (
        <PermissionsContext.Consumer>
          props => <WrappedComponent ...this.props permissions=props />
        </PermissionsContext.Consumer>
      );
    
  ;
;

PermissionsProvider的用法：

<PermissionsProvider>
    <App />
</PermissionsProvider>

这包括一个上下文，以便我可以 useContext(PermissionsContext) 和一个 HOC withPermissions，以便我用它包装旧版 class 组件。

对于class，我会调用this.props.permissions.can('doThing1', 'doThing2')，它应该返回true 或false，具体取决于用户负载中是否存在所有这些功能。

它似乎运行良好，但当我尝试提交时，我收到错误：

React Hook "useSelector" 在函数 "can" 中被调用，该函数既不是 React 函数组件也不是自定义 React Hook 函数 react-hooks/rules-of-hooks

我发现命名约定存在一些问题，但这似乎不适用于此处（？）。我还曾经在函数内部有 useAbilities 挂钩，就在 can 函数上方，这也引发了错误。

有什么想法吗？

【问题讨论】：

value= can === value= can: can ==> value 正在获取具有 can 属性的对象。这就是你想要的吗？

【参考方案1】：

以上所有代码都是正确的。这似乎是某种持续抱怨的 eslint 缓存。清除缓存并重新运行 lint 后，它就消失了。