SetState更新，但不保存 [英] SetState Updates but does not save

问题描述

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

Below is my code, I am attempting to setState a string global context value, the string exists by itself and is not apart of an array of variables, When I click login, I can see the h1 containing the global value login.loggedin updating to true as requested, however when the login finishes and auth0 redirects back to the app, the value is no longer changed to login and goes back to false, On the tutorial I followed, https://www.youtube.com/watch?v=35lXWvCuM8o Dev ed talks about using prevState to make sure it correctly assigns the value, however I am unsure how to use prevState for a string instead of the array he uses in his example, can someone please explain to me how set state can be showing as working but not saving and a possible fix? I even placed the loginwithredirect after the set state but is it possible the loginwithredirect is happening before the state change can finish processing?

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>
        </>
    )
  )
}

----------

是因为我没有提交页面而发生的吗?如果您需要提交，似乎会使钩子受到很大限制，所以我想也不是

is this happening because I am not submitting the page? It seems that would make hooks quite limiting if you need to submit, so I am guessing that's not it either

推荐答案

我只是在这里猜测.

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

I'm assuming that when you call loginWithRedirect the app navigates away from your app (to Auth0? site), then user authenticates, and then the browser redirects back to your app. If this happens, whatever you saved in your ValueContext context will be reset to its initial state. During the initialisation of the ValueContext you need to take into account current user authentication.

另外， useAuth0 钩子提供的 isAuthenticated 标志似乎与您的 ValueContext.login 标志具有几乎相同的含义.您实际上是否需要 login 标志?如果需要，必须始终将 ValueContext.login 的值与 isAuthenticated 保持同步，以避免任何奇怪的行为.

Also, it seems that isAuthenticated flag provided by useAuth0 hook has pretty much the same meaning as your ValueContext.login flag. Do you actually need login flag? If you need it, you have to keep the value of ValueContext.login in sync with isAuthenticated at all time to avoid any odd behaviours.

这篇关于SetState更新，但不保存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！