当前位置: 首页 > 知识库问答 >
问题:

重新加载页面后保留GlobalState

微生旻
2023-03-14

请考虑以下代码:

忽略所有axios请求:

login.js

const login = async () => {
    let newLogin = {
      email,
      password,
    };

    await axios
      .post("http://localhost:5000/login", newLogin)
      .then((response) => {
        if (response.data === 404) {
          setUserError("User not found. Please Sign Up");
        } else if (response.data === 403) {
          setPasswordError("Incorrect Password");
        } else {
          dispatch({type:'LOG_IN',payload:{LoggedIn:true , currentUser:"Curent user"}})
          navigate("/");
        }
      })
      .catch((err) => console.log(err));
  };

此页面通过将loggedIn更改为true并将currentUser更改为“fa”来更新GlobalContext。

profile.js

import React , {useContext} from 'react'
import '../App.css'
import {Context} from '../GlobalState/Store'

const Profile = () => {

  const [state,dispatch] = useContext(Context);

    console.log(state);
    return (
      <div className="profile-page">
        <div className="personal">
          <h2>First Name:</h2>
          <h2>Last Name:</h2>
          <h2>Resistered Email:</h2>
          <h2>User Name:</h2>
        </div>
        <div className="info">
          <h2>Father Name:</h2>
          <h2>Gender:</h2>
          <h2>CNIC:</h2>
          <h2>Blood Group:</h2>
          <h2>Contact:</h2>
        </div>
        <div className="uni-info">
          <h2>Designation:</h2>
          <h2>Department:</h2>
          <h2>Batch:</h2>
          <h2>Roll No:</h2>
          <h2>Enrolement:</h2>
        </div>
      </div>
    );
}

export default Profile

这将获取状态并记录它。

下面是reducer.js和globalcontext.js:

const Reducer = (state,action) =>{
    switch(action.type){
        case 'LOG_IN':
            return {
                userEmail: action.payload.currentUser,
                loggedIn: action.payload.LoggedIn
            }

        case 'LOG_OUT':
           return {
               userEmail: action.payload.currentUser,
               loggedIn: action.payload.LoggedIn
           }

        default:
            return state;
    }
}


export default Reducer;


import React,{useReducer , createContext} from 'react'
import Reducer from './Reducer';

const initialState ={
    loggedIn: false,
    currentUser:''
}

const Store = ({children}) => {

    const [state , dispatch] = useReducer(Reducer,initialState)
    return (
        <Context.Provider value={[state , dispatch]} >
            {children}
        </Context.Provider>
    )
}


export const Context = createContext(initialState)
export default Store

一切工作都很好,一旦我登录,我就会被重定向到主页,就像我应该做的那样,正确的状态正在被记录。

但是,一旦我刷新了主页,所有的东西就会恢复到初始状态。

我需要保留状态,因为它将用于应用'IFLoggedIn'逻辑。

提前道谢。

共有1个答案

叶德本
2023-03-14

您的登录请求将为您的站点提供一个应存储的cookie。在加载页面之前,检查cookie/会话是否有效,并相应地设置状态。

你的反应状态不能在硬刷新之间(直接)被切断

 类似资料:
  • 嗨,伙计们,我是一个平均堆栈开发的初学者,我试图在注销后刷新页面。我尝试了;但它不起作用告诉我可能的代码页面重载在这种情况下

  • 我想在注销后刷新/重新加载页面(屏幕上的消息在5秒钟内可见)。当前代码不会刷新它,所以我仍然在标题中看到用户名,而不是像登录按钮这样的东西。 我已经检查了这篇文章,但没有什么变化。

  • 问题内容: 成功的ajax调用后,我在重定向/重新加载时遇到一些问题。情况如下: 我有要删除的项目保存在数组中。当我单击一个按钮时,它将通过ajax调用PHP文件,成功后,我需要重新加载页面。但是我在这样做时有一些问题。我在互联网上搜索,找不到有效的解决方案。 我有PHP文件,该文件通过数组从数据库中逐项删除。 另外,我有jQuery部分: 我的意思是,该代码有效,但效果不佳。它会删除项目,但不是

  • 我想重新加载页面。我该怎么做?

  • 我添加了快速结账按钮到我的页面,并使用客户端代码设置服务器端进程: 我使用服务器端。NET SDK通过通用处理程序创建和处理支付,它工作正常,但是在调用支付执行后,整个页面被重新加载。 我想通过执行监听器处理结果/错误-paypal。要求post(执行付款URL…)使用定义的回调。然后()和。catch()方法。 用于贝宝的互动演示https://developer.paypal.com/demo

  • 问题内容: 我试图找出一种方法来保持我的变量与页面刷新/跨控制器。我的工作流程是 用户通过Facebook登录并获得访问令牌 用户访问令牌将与每个请求一起使用 我尝试了两种方法, 1-将令牌分配给 不工作 2-使用 但是问题是,如果刷新页面,该页面将变为空白。我是新手,无法找到刷新页面后保留数据的方法 任何帮助将非常感激 问题答案: 您可以使用。真的很容易使用。