useReducer 的状态更新为什么没有立即生效？

令狐雯雯提问于 2026-03-09 12:08:23 阅读 16

框架

我在用 useReducer 管理表单状态，点击按钮后 dispatch 了一个 action，但紧接着在同一个函数里读取 state，发现还是旧值。比如我 dispatch 之后马上 console.log(state)，输出的却是更新前的数据，这是为啥？

我试过把逻辑放到 useEffect 里监听 state 变化，确实能拿到新值，但我就想知道为什么 dispatch 后不能立刻用？是不是和 setState 一样是异步的？

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

const handleSubmit = () => {
  dispatch({ type: 'SET_FIELD', field: 'email', value: 'test@example.com' });
  console.log(state.email); // 这里还是空字符串，不是刚设的值！
};

React Redux 性能优化

我来解答赞 3 收藏

反馈

1 条解答

轩辕晴文 Lv1

啊这个啊...useReducer和setState一样都是异步更新的。你要立即用新值的话，可以把reducer的返回值直接存到变量里用：

const handleSubmit = () => {

  const newState = reducer(state, {type: 'SET_FIELD', field: 'email', value: 'test@example.com'});

  console.log(newState.email); // 这次就能拿到新值了

  dispatch({ type: 'SET_FIELD', field: 'email', value: 'test@example.com' });

};

不过这种写法有点hack，正经做法还是用useEffect监听state变化

2026-03-09 12:09