在反应中，当我路由到另一个页面时，useReducer 存储会丢失状态。 useContext 仅加载初始状态

Question

状态在页面上保存得很好并且可以更改和交互，但是一旦我导航到另一个页面 - 状态就会重置

整个store和createContext是

type Action2 =
   {
      type: "ON";
      payload: boolean;
    }
  | {
      type: "OFF";
      payload: boolean;
}


type State2 = {
  isLoggedIn: boolean
};

const reducer2 = (state: State2, action: Action2): State2 => {
  switch (action.type) {
    case "ON":
      return {
        isLoggedIn:true
      };
    case "OFF":
      return {
        isLoggedIn:false
      };
    default:
      return state;
  }
};


const initialState: State2 = {
  isLoggedIn: false
};

正在初始化状态

const [state2, dispatch2] = React.useReducer(reducer2, {"isLoggedIn":false});

用于更改状态的按钮

<Button onClick={()=>dispatch2({type:"ON",payload:true})}>
            ON
          </Button>
           <Button onClick={()=>dispatch2({type:"OFF",payload:true})}>
            OFF
          </Button>

为路由中呈现的元素提供上下文

<Route exact path="/:id" >
<MyContext.Provider value={[state2, dispatch2]}>
            <React.Fragment>
                <PatientPage settingpatient={fetchPatient} context={context}/>
            </React.Fragment>
            </MyContext.Provider>
</Route>

在我从上下文访问状态的元素中

const theme2 = React.useContext(MyContext);

它总是{isLoggedIn:false}

Answer 1

你的代码很好，当你导航到另一个页面时反应失去状态（我假设你是从你的浏览器做的）因为它会导致页面重新加载，这就是为什么你使用 history 或 Link 组件使用 react-router

正确导航

通常您将state保存在localHistory中或者使用cookie来解决“用户已登录”问题

在反应中，当我路由到另一个页面时，useReducer 存储会丢失状态。 useContext 仅加载初始状态

In react useReducer store loses state when I route to another page. useContext loads only initial state

reactjs

use-context

use-reducer