如何解决useContext 值未更新
我试图在用户登录时使用 useContext 更改身份验证状态,这将在其他组件中接收到,以根据用户是否已登录有条件地显示。
登录上下文设置如下
我通过这种方式传递了提供者
我制作了一个按钮,点击后将 loggedIn
设置为 true
然而,当我重新路由到 store
时,来自 useContext
的值仍然保持为 false
,尽管我已经在 Login
组件中更新了它
路由回“/login”后,状态从 useContext
仍然显示 false
而不是 true
我是否遗漏了useContext
的工作原理?
解决方法
这是意料之中的。您调度您的操作,但结果状态仅在下一个渲染阶段可见。不是马上。它不会同步发生。如果您想检查该值,您可以:
React.useEffect(() => {
console.log('loggedIn value changed',state.loggedIn)
},[state.loggedIn])
,
我设法从另一个帖子中弄清楚发生了什么:useContext does not survive between pages
因此,通过使用 react-router-dom
和 Link
,应用程序现在可以工作并将上下文传递给不同的页面和组件,但在刷新或打开新选项卡时不会继续存在。
请注意,如果需要此功能,例如login/auth
,最好的方法是通过localStorage
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。