React Context状态自动丢失，无法单独更新字段求助

你的changeAppData分支逻辑存在错误：当前代码把appData的三个字段全部赋值为同一个action.payload，这意味着只要你只传递单个字段的值（比如仅更新headerTitle时传入字符串），另外两个字段会被强制覆盖为这个值（或undefined），导致原有数据丢失。

你需要让changeAppData的action.payload是一个部分AppData对象（只包含需要更新的字段），然后通过对象展开语法，将新字段与原有appData合并，保留未修改的字段。

修改后的Reducer代码 #

export function AppReducer(state: AppState, action: Actions): AppState {
  switch (action.type) {
    case 'setAppData':
      return {
        ...state,
        appData: action.payload
      };

    case 'changeAppData':
      return {
        ...state,
        appData: {
          ...state.appData, // 保留原有所有字段
          ...action.payload // 覆盖需要更新的字段
        }
      };
    // 处理默认case，避免触发未定义action时返回undefined
    default:
      return state;
  }
}

对应的Action调用示例 #

当你需要单独更新某个字段时，传递包含该字段的对象即可：

// 仅更新headerTitle
dispatch({
  type: 'changeAppData',
  payload: { headerTitle: '新页面标题' }
});

// 仅更新userHasLoggedOut
dispatch({
  type: 'changeAppData',
  payload: { userHasLoggedOut: true }
});

// 同时更新多个字段
dispatch({
  type: 'changeAppData',
  payload: {
    headerTitle: '首页',
    testValue: 456
  }
});

补充说明 #

• 确保你的Actions类型定义中，changeAppData的payload类型为Partial<AppData>，让TypeScript自动校验传入字段的合法性：

  type Actions = 
    | { type: 'setAppData'; payload: AppData }
    | { type: 'changeAppData'; payload: Partial<AppData> };
  

• 必须添加default分支返回原state，否则触发未定义的action类型时，reducer会返回undefined，导致状态异常。

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