我正在研究中型项目,并且使用类以及组件级别状态创建了React中的某些组件。为了进行身份验证并将令牌保留在本地存储中并从中重新加载用户,我将使用钩子。
现在我很后悔这个决定,就好像您要刷新类组件一样,您会失去用户并被踢回到登录屏幕。
我知道钩子用于函数,但是有没有办法在类中使用钩子(使用户无法使用)?
//The hook I am using
useEffect(()=>{
auth.Context.loadUser();
//eslint-disable-next-line
},[]);
答案 0 :(得分:0)
根据React文档,您不能在类组件内部使用钩子:
https://reactjs.org/docs/hooks-faq.html#should-i-use-hooks-classes-or-a-mix-of-both
您可以做的是将类组件与功能组件包装在一起,并向其传递道具
例如:
class MyClass extends React.Component{
render(){
<div>{this.props.user}</div>
}
}
const funcComp = () => {
const [user, setUser] = useState();
useEffect(() => {
auth.Context.loadUser().then(user => setUser(user))
}, [setUser]);
return <MyClass user={user}/>
}