React中useReducer能否像useState一样通过更新器函数多次更新状态？

算力阿峰

2026-8-21

可以，useReducer完全支持这种基于当前最新状态的多次更新

useReducer的工作机制和useState的函数式更新逻辑一致——每次通过dispatch触发状态更新时，reducer函数接收的第一个参数都是当前最新的状态快照，不管你在同一个函数里调用多少次dispatch，后续的更新都会基于前一次更新后的最新状态计算，和你用useState的更新器函数效果完全等价。

对应实现示例

先看你原来的useState写法：

const someFunc = () => {
  // 其他计算逻辑
  const result = someOtherFunc();
  setState((state)=>{
    // 基于当前状态处理
    return {...state, result} 
  })

  const result2 = someOtherFunc2();
  setState((state)=>{
    // 基于当前状态处理
    return {...state, result2} 
  })
}

改用useReducer的实现如下：

先定义reducer函数，集中处理状态更新逻辑：

const reducer = (currentState, action) => {
  switch (action.type) {
    case 'SET_RESULT':
      // 这里的currentState是触发更新时的最新状态
      return { ...currentState, result: action.payload };
    case 'SET_RESULT2':
      // 同样基于最新状态更新
      return { ...currentState, result2: action.payload };
    default:
      return currentState;
  }
};

在组件中使用useReducer并调用dispatch：

import { useReducer } from 'react';

// 初始状态，根据你的实际情况定义
const initialState = { result: '', result2: '' };

const YourComponent = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const someFunc = () => {
    // 其他计算逻辑
    const result = someOtherFunc();
    dispatch({ type: 'SET_RESULT', payload: result });

    const result2 = someOtherFunc2();
    dispatch({ type: 'SET_RESULT2', payload: result2 });
  };

  // 组件渲染逻辑...
};