求助：Ionic路由切换时React全局Context状态重置问题

问题核心排查 #

状态重置的根本原因通常是：App组件中维护全局状态的useState被重新初始化，或是状态更新逻辑存在错误。以下是具体修复步骤：

1. 修正组件中错误的状态更新时机 #

你的组件代码中直接在函数顶层调用setGlobalState，这会导致每次组件渲染（包括路由切换后组件重新挂载）都执行状态更新，可能覆盖原有状态。必须将状态更新放在useEffect或事件处理函数中：

错误写法：

const {globalState, setGlobalState} = useContext(GlobalContext);

// 顶层直接调用，每次渲染都会执行
setGlobalState((prevState: IGlobalState) => {
  let state = {...prevState};
  state.prop1 = "someValue";
  return state;
});

正确写法：

const {globalState, setGlobalState} = useContext(GlobalContext);

// 仅在组件挂载时执行一次
React.useEffect(() => {
  setGlobalState((prevState: IGlobalState) => {
    let state = {...prevState};
    state.prop1 = "someValue";
    return state;
  });
}, []);

// 或绑定到事件触发
const handleUpdate = () => {
  setGlobalState((prevState: IGlobalState) => {
    let state = {...prevState};
    state.prop1 = "someValue";
    return state;
  });
};

2. 确保路由跳转不会触发页面刷新 #

如果使用原生a标签或window.location.href跳转，会导致整个应用重新加载，全局状态自然重置。必须使用Ionic或React Router提供的跳转组件：

// Ionic 跳转方式
<IonRouterLink href="/settings">设置页面</IonRouterLink>

// React Router 跳转方式
<Link to="/settings">设置页面</Link>

3. 检查App组件是否被意外卸载 #

在App组件中添加日志，确认路由切换时是否会触发组件卸载/重新挂载：

const App: React.FC = () => {
  const [globalState, setGlobalState] = React.useState(initialState);
  const globalContextState = { globalState, setGlobalState };

  React.useEffect(() => {
    console.log("App组件挂载");
    return () => console.log("App组件卸载");
  }, []);

  // 其余代码不变
}

如果路由切换时出现"App组件卸载"日志，说明上层存在条件渲染或路由逻辑导致App被重新挂载，需要排查上层组件的结构。

4. 优化Context Provider的稳定性（可选） #

每次App组件渲染时，globalContextState都会创建新对象，导致所有消费Context的组件不必要重渲染。用useMemo缓存这个对象：

const App: React.FC = () => {
  const [globalState, setGlobalState] = React.useState(initialState);
  const globalContextState = React.useMemo(() => ({
    globalState,
    setGlobalState
  }), [globalState, setGlobalState]);

  // 其余代码不变
}

5. 修正Context接口的语法错误 #

你的IGlobalState接口中重复定义了prop2，这会导致TypeScript类型错误，修正为：

export interface IGlobalState {
    prop1: boolean,
    prop2: string,
    prop3: string, // 替换重复的prop2
    [key: string]: any
}

内容的提问来源于stack exchange，提问作者traxx2012