useContext 值未更新答案

【问题标题】：useContext value not updatinguseContext 值未更新
【发布时间】：2021-08-23 11:51:11
【问题描述】：

我试图在用户登录时使用 useContext 更改身份验证状态，这将在其他组件中收到，以根据用户是否已登录有条件地显示。

登录上下文设置如下

我就是这样通过了provider

我制作了一个按钮，点击后将loggedIn 设置为true

但是，当我重新路由到 store 时，useContext 的值仍保持为 false，尽管我已在 Login 组件中对其进行了更新

在路由回“/login”时，来自useContext 的状态仍然显示false 而不是true

我是否遗漏了 useContext 的工作原理？

【问题讨论】：

【解决方案1】：

这是意料之中的。您调度您的操作，但结果状态将仅在下一个渲染阶段可见。不是马上。它不会同步发生。如果您想检查该值，您可以：

React.useEffect(() => {
  console.log('loggedIn value changed', state.loggedIn)
}, [state.loggedIn])

【讨论】：

是的，但是在路由到“/store”时，尽管我在登录组件中将其设置为 true，但上下文中的值仍然为 false。我已经更新了我的答案以反映相同的情况。你能帮帮我吗？
你能把LoginProvider上面的Switch移动一下吗？
@JemyJenesh 它没有改变，在路由到 "/store" 时，上下文中的值仍然是 false

【解决方案2】：

我设法从另一个帖子中弄清楚发生了什么：useContext does not survive between pages

因此，通过使用react-router-dom 和Link，应用程序现在可以工作并将上下文传递给不同的页面和组件，但在刷新或打开新选项卡时不会继续存在。

请注意，如果需要此功能，例如login/auth，最好的方法是通过localStorage

【讨论】：