React Native中useReducer更新状态后UI未更新问题

你的问题核心是Reducer里直接修改了原state对象，导致React检测不到状态变化，所以UI没更新。

看你的Reducer代码：

return {
  ...state,
  ...(state[field] = {
    data: action.payload.items,
    page: 0,
    loading: true,
  }),
};

这里state[field] = {...}是直接修改了传入的state参数（原状态对象），然后用扩展运算符把修改后的state再展开返回。这种写法会让新状态和旧状态的引用完全一致，React的状态更新依赖引用变化来触发重渲染，所以即使数据变了，组件也不会重新渲染。

修正方案：返回全新的状态对象 #

Reducer必须是纯函数，绝对不能修改原state，要基于原state创建全新的对象。修改你的Reducer代码：

export function DocumentStateReducer(
  state: DocumentListInterface,
  action: DocumentReducerAction
): DocumentListInterface {
  const field: DocumentType = action.type;
  switch (action.action) {
    case DocumentListAction.REFRESH_DATA:
      return {
        ...state,
        [field]: {
          data: action.payload.items,
          page: 0,
          loading: true,
        },
      };
    default:
      throw new Error("Invalid action called");
  }
}

这里通过...state复制原状态的所有属性，然后用[field]语法覆盖对应字段的内容，返回的是一个全新的对象，React能检测到状态变化，从而触发组件重渲染，FlashList/FlatList就能拿到新数据了。

额外验证点 #

• 确保initialState的结构和DocumentListInterface完全匹配，每个DocumentType对应的字段都有初始值（比如data: []）。
• 组件中要正确使用useDocuments钩子获取状态，比如：

  const { state } = useDocuments();
  // 然后在FlashList中使用
  data={state[route.params.documentType].data}
  

  不要用外部变量缓存状态，直接从钩子获取最新值。

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