我做了自定义钩子,并在拦截器中使用,这不是react组件,而是javascript函数,所以我得到了这个错误--。
无效的钩子调用。钩子只能在函数组件的主体中被调用。.
这是很不幸的,因为它阻止了我们在旧的基于类的组件和常规的javascript函数中使用新的基于钩子的模块,所以现在我想将自定义钩子转换为HOC。
const useLoader = props => {
const [loading, setLoading] = useState(props);
return [
loading ? <Loader /> : null,
() => setLoading(true), // show loader
() => setLoading(false) // hideLoader
];
};
export default useLoader;
我怎么能做到这一点,我从来没有写过HOC。
所以要求当我点击继续按钮时,加载器将在屏幕上可见,在得到响应后,只有加载器会消失并导航到下一页。
这里是更新后的代码,我已经用HOC更新了,但Loader似乎只在第一次加载页面时工作,我在这里缺少什么?
你可以像这样尝试。
const LoaderHOC = ({ Component }) => {
const [loading, setLoading] = useState(props);
const toggleLoading = () => {
setLoading(!loading)
}
return (
loading ? <Loader/> : <Component toggleLoading={toggleLoading}/>
)
};
export default useLoader;
我想你会得到一个想法。