Javascript 根据axios响应更新上下文

我面临一个问题

未处理的拒绝（错误）：钩子调用无效

显然，这违反了“不要在事件处理程序中调用”的规则？我找不到其他方法来更新我的上下文。我需要上下文，更新几个组件，比如menu.js，管理私有路由的可访问性

My AuthContext.js

export const AuthContext=React.createContext({
token:localStorage.getItem（'token'）| |“”，
setToken:（）=>{}
});

我的LoginForm.js

类LoginForm扩展组件{
authContext=useContext（authContext）；
构造函数（）{
超级（）；
此.state={
电子邮件：“夏娃。holt@reqres.in',
密码：“cityslicka”，
错误：“”
};
this.handlePasswordChange=this.handlePasswordChange.bind（this）；
this.handleEmailChange=this.handleEmailChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleSubmit（evt）{
evt.preventDefault（）；
axios({
方法：“POST”，
网址：'https://reqres.in/api/login',
数据：{
电子邮件：this.state.email，
密码：this.state.password
}
})。然后（结果=>{
如果（result.status==200）{
this.authContext.setToken（result.data.token）；
setItem（'token'，result.data.token）；
}else{}
});
}
...
}

我找到了一些答案，但我无法理解或解决我的问题。如果你能解释你的答案，我将不胜感激

---

感谢您的帮助

您需要将经典组件重写为功能组件，因为钩子不是为在类内工作而设计的。 查看react doc的挂钩规则：

---

钩子不能在类组件内部使用。