SetState 更新但不保存

Posted 2023-02-23

【中文标题】SetState 更新但不保存

【英文标题】：SetState Updates but does not save

【发布时间】：2021-02-14 00:53:40

【问题描述】：

下面是我的代码，我正在尝试 setState 一个字符串全局上下文值， 字符串本身存在，不属于变量数组， 当我单击登录时，我可以看到包含全局值 login.loggedin 的 h1 按请求更新为 true，但是当登录完成并且 auth0 重定向回应用程序时，该值不再更改为 login 并返回 false， 在我遵循的教程中，https://www.youtube.com/watch?v=35lXWvCuM8o Dev ed 谈到使用 prevState 来确保它正确分配值， 但是我不确定如何将 prevState 用于字符串而不是他在示例中使用的数组，有人可以向我解释设置状态如何显示为工作但不保存和可能的修复吗？我什至将 loginwithredirect 放在设置状态之后，但是否有可能在状态更改完成处理之前发生 loginwithredirect？

import React,  useState, useContext, useEffect from 'react';
import  useAuth0  from '@auth0/auth0-react';
import  ValueContext  from './ValueContext'
const LoginButton = () => 
  const  loginWithRedirect, isAuthenticated  = useAuth0();

  const [login, setLogin] = useContext(ValueContext); 

    const updateLogin = () => 
    
    setLogin(loggedIn:'true');
    console.log(login.loggedIn + " = login.loggedinvalue after update")
    console.log('true log')
    loginWithRedirect()
  ;  

  return (
    !isAuthenticated && (
      <>
      <button onClick=() => updateLogin() >
        Log In
      </button>
      <h1>login.loggedIn</h1>
        </>
    )
  )


----------

这是因为我没有提交页面吗？如果您需要提交，这似乎会使钩子非常有限，所以我猜也不是这样

【参考方案1】：

我只是在这里猜测。

我假设当您调用 loginWithRedirect 时，应用程序会离开您的应用程序（到 Auth0? 站点），然后用户进行身份验证，然后浏览器会重定向回您的应用程序。如果发生这种情况，您在 ValueContext 上下文中保存的任何内容都将重置为其初始状态。在ValueContext 的初始化过程中，您需要考虑当前用户身份验证。

此外，useAuth0 钩子提供的isAuthenticated 标志似乎与您的ValueContext.login 标志具有几乎相同的含义。你真的需要login 标志吗？如果需要，您必须始终保持ValueContext.login 的值与isAuthenticated 同步以避免任何奇怪的行为。

【讨论】：

是的 isAuthenticated 已经具有相同的含义，我这样做纯粹是为了了解有关如何使用 reactHooks 的更多信息，“在初始化 ValueContext 期间您需要考虑当前用户是什么意思身份验证。”

我的意思是，当您初始化ValueContext 时，您需要将login 标志的值设置为正确的值。您需要检查用户是否已经登录。如果您始终设置login=false，那么在每次重新加载页面后，您的标志将重置为 false。

你能通过 sn-p 告诉我它是如何初始化的吗？我也猜测 if 语句会出现在 updateLogin 中，能否请您向我提供如何完成此操作的 sn-ps 我有点困惑