useContext 值未更新

Question

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

登录上下文设置如下

我通过这种方式传递了提供者

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

然而，当我重新路由到 store 时，来自 useContext 的值仍然保持为 false，尽管我已经在 Login 组件中更新了它

路由回“/login”后，状态从 useContext 仍然显示 false 而不是 true

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

Answer 1

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

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

Answer 2

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

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

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