React useReducer Hook每次Dispatch始终使用初始状态而非更新后状态的问题

你遇到的问题是：使用useReducer时，dispatch的动作能被reducer正确接收（type和payload都正确），但state始终停留在初始状态，无法更新。以下是针对性的排查方向和修复方案：

1. 检查initialState的定义 #

确保initialState包含reducer中所有要更新的字段，且字段名与reducer中的完全一致。示例定义需匹配FasiInterventoState类型：

const initialState: FasiInterventoState = {
  selectedIds: [],
  lavorazioniCounter: 0,
  ddtCounter: 0,
  materialsCounter: 0,
  mezziCounter: 0,
  spedizioniCounter: 0,
  speseCounter: 0,
  varieCounter: 0,
  isLavorazioniSectionCompacted: false,
  isDdtSectionCompacted: false,
  isMaterialsSectionCompacted: false,
  isMezziSectionCompacted: false,
  isSpedizioniSectionCompacted: false,
  isSpeseSectionCompacted: false,
  isVarieSectionCompacted: false
};

若某个字段在initialState中未定义，第一次更新会添加该字段，但后续更新可能出现异常，务必保证所有需更新的字段都已初始化。

2. 确认自定义Hook的使用方式 #

• 禁止在条件语句、循环、嵌套函数中调用useInterventiState，React要求Hook的调用顺序必须稳定，否则会导致state实例混乱。
• 若需在多个组件中共享状态，必须通过Context提供useInterventiState返回的state和dispatch，而非每个组件单独调用Hook（每个调用会创建独立的state实例）。

3. 验证Reducer的纯函数特性 #

你的reducer已通过{...state, ...}返回新对象，符合纯函数要求，但需确保：

• 未在reducer中修改原state对象（比如直接执行state.selectedIds = payload）
• 未在reducer中执行异步操作、调用外部非纯函数

4. 排查toggleIsSectionCompacted的闭包问题 #

如果toggleIsSectionCompacted被缓存（比如用useCallback），可能会捕获旧的state值，导致payload计算错误。若需要缓存该函数，必须将state加入依赖项：

const toggleIsSectionCompacted = useCallback((section2Toggle: CompactableSection) => {
  // ...原逻辑
}, [state]);

若未缓存该函数，此问题可忽略，但需确保每次调用Hook时都能拿到最新的state。

5. 直接测试dispatch动作 #

跳过toggleIsSectionCompacted，在组件中直接调用dispatch测试：

const { state, dispatch } = useInterventiState();
// 测试按钮点击时触发
<button onClick={() => dispatch({type: 'UPDATE_IS_MATERIALS_SECTION_COMPACTED', payload: !state.isMaterialsSectionCompacted})}>
  切换折叠状态
</button>

如果直接dispatch后state更新正常，说明问题出在toggleIsSectionCompacted函数中；若仍无法更新，需检查reducer的类型定义（比如FasiInterventoAvailableActions是否包含所有action类型）。

6. 检查组件重渲染逻辑 #

如果state实际已更新，但组件未重渲染，可能是：

• 组件使用了React.memo但未正确设置依赖项
• 父组件未传递更新后的props导致子组件不刷新

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