我正在尝试制作一个权限提供程序，用于包装某些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)，还包括一个HOCwithPermissions，以便我用它包装遗留的class组件。
在class的情况下，我会调用this.props.permissions.can('doThing1', 'doThing2')，它应该返回true或false，这取决于用户有效载荷中是否存在所有这些能力。
它似乎运行良好，除了当我试图提交它时，我得到了错误：
React Hook"useSelector"在函数"can"中被调用，该函数既不是React函数组件，也不是自定义的React Hoo克函数React Hook/rules of hooks
我看到了命名约定的一些问题，但这似乎不适用于这里(？(。我曾经在can函数的正上方的函数中有useAbilities钩子，它也引发了错误。
有什么想法吗？
以上所有代码都是正确的。似乎是某种esint缓存在继续抱怨。清除缓存并重新运行lint后，它就消失了。