React中调用useReducer的dispatch后state未更新是什么原因？

问题根因 #

你遇到的状态没有变化的错觉，本质是React状态更新的异步特性和函数闭包的快照机制导致的：
useReducer 和 useState 触发的状态更新都是批量异步执行的，dispatch 调用后不会立刻修改当前作用域下的state变量。你在dispatch之后紧接着打印的state，是当前渲染周期函数闭包捕获的初始状态快照，要等组件完成重渲染后，下一个渲染周期里的state才会是更新后的值。
你已经把token存入了localStorage，说明dispatch已经正常触发reducer逻辑，状态实际上已经被更新，只是你在当前闭包里拿不到最新值而已。

验证状态确实更新的方法 #

你可以在AuthState组件的顶层（不在handleLogin函数内部）添加打印语句：

const [state, dispatch] = useReducer(AuthReducer, initialState);
console.log('当前状态：', state.token, state.isAuth) // 新增打印

触发登录后你会看到控制台打印两次，第一次是初始值，第二次就是更新后的token和isAuth: true，说明状态更新是成功的。

修复你的跳转逻辑 #

你现在把history.push放在dispatch之后的.then里，此时还没拿到最新状态，要实现状态更新后再跳转，推荐两种方案：

方案1：用useEffect监听状态变化 #

// 在AuthState组件内添加
useEffect(() => {
  if (state.isAuth) {
    closeAllPopups();
    history.push('/');
  }
}, [state.isAuth, history, closeAllPopups])

当isAuth更新为true时，自动执行后续逻辑，保证拿到的是最新状态。

方案2：直接用接口返回结果判断 #

因为你登录接口已经返回了成功的token，不需要等React状态更新再跳转，直接修改handleLogin逻辑即可：

login(formData)
  .then((res) => {
    if (res && res.token) {
      dispatch({ type: LOGIN_SUCCESS, payload: res })
      closeAllPopups()
      history.push('/')
    } else {
      dispatch({ type: LOGIN_FAIL, payload: res });
    }
  })
  .catch((err) => dispatch({ type: LOGIN_FAIL, payload: err.toString() }));

额外代码优化点 #

你接口代码里的错误处理写的有问题，PromiseRejectionEvent是浏览器事件对象，不是用来抛错误的，应该改成Promise.reject(err)：

.then((res) => {
  return res.ok
    ? res.json()
    : res.json().then(err => Promise.reject(err));
})

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