在react中，当我路由到另一个页面时，useReducer存储将丢失状态.useContext仅加载初始状态

Question

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

整个商店和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>  

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

const theme2 = React.useContext(MyContext);

它总是{isLoggedIn:false}吗

Answer 1

您的代码很好，当您导航到另一个页面时react会丢失状态(我假设您是从浏览器中进行的(，因为它会导致页面重新加载，这就是为什么您使用history或Link组件来使用react-router正确导航

通常将CCD_ 4保存在CCD_；用户登录"；发布