使用 AppContext() 时如何设置状态？

Question

当我尝试在登录函数中使用 true 设置状态 userHasAuthenticated 时，它在 console.log(isAuthenticated) 中 return false（在 App.js 'false' 中保持不变)?

我想在 Home Component 中使用它同样的问题 'false';

  //----------------------in App.js----------------------

var [isAuthenticated, userHasAuthenticated] = useState('false');

<AppContext.Provider value={{ isAuthenticated, userHasAuthenticated }}>
//...
</AppContext.Provider>


//-------------- in Login.js---------------------

const { isAuthenticated,userHasAuthenticated } = useAppContext();

const login = () => {

    userHasAuthenticated('true'); 
    console.log(isAuthenticated);  //  false ?
     window.location.assign("/Home");

} 


  //  ---------------------in Home.js------------------------

 const { isAuthenticated,userHasAuthenticated } = useAppContext();
        console.log(isAuthenticated);// --->false ?


 //-------------- in context.js---------------------
    
      export const AppContext = createContext(null);
    
        export function useAppContext() {
          return useContext(AppContext);
        }

Answer 1

在大多数情况下，这段代码似乎是正确的，据我所知，这里唯一的错误是您试图在设置后立即 console.log 进入 isAuthenticated 状态。这不会起作用，因为状态设置是异步的，这意味着您不能期望它会立即更新。

您可以试试看状态是否改变：

//-------------- in Login.js---------------------

const { isAuthenticated, userHasAuthenticated } = useAppContext();

useEffect(() => {
  console.log(isAuthenticated); // this should be "true" after `login` has run
}, [isAuthenticated]);

const login = () => {
  userHasAuthenticated('true'); 
  console.log(isAuthenticated); // this should be "false"
  window.location.assign("/Home");
}

Answer 2

记住你的上下文数据在内存中，每次你刷新你的应用程序，App.js它会被调用并再次渲染，所以它会调用你的上下文并再次创建为 false。这就是为什么你在调用 isAuthenticated 时得到 'FALSE' 除了在登录页面

您最好将数据保存在 localstorage 中，并在每次刷新或浏览您的应用程序时从那里获取数据，这会将所有信息保存在您的 useAppContext() 挂钩中。

App.js:

const [isAuthenticated, userHasAuthenticated] = useState(localStorage.getItem('user') || 'false');

在您的 Login.js 中试试这个：

export const Login = (props) => {

const {isAuthenticated, userHasAuthenticated} = useAppContext();



useEffect(() => {
    userHasAuthenticated('true');
    localStorage.setItem('user', 'true'); // set user to authenticated
}, []);



return (
    <>
        <h1>isAuthenticated =  {isAuthenticated}</h1>
    </>
);

};

然后从你的 useAppContext() 获取数据：

export const Home = (props) => {

const { isAuthenticated } = useAppContext();

return (
    <>
        <h1>isAuthenticated = {isAuthenticated}</h1>
    </>
);

};

结果：

enter image description here

使用 AppContext() 时如何设置状态？

How to set the State when using AppContext()?

javascript

reactjs

use-state