Redux Toolkit首次dispatch时action.payload为undefined，二次调用正常

问题根源 #

你遇到的问题核心是useState的更新是异步的。在Formik的onSubmit回调中，你先调用setLuxmedBenefitUser({ ...userProps, ...values })，紧接着就用luxmedBenefitUser触发dispatch。但此时React还没完成这个state的更新，luxmedBenefitUser依然是初始的undefined，导致reducer收到的payload为undefined。当你再次提交时，上一次的state更新已经完成，所以能传递正确的值。

修复方案 #

不需要依赖state的异步更新结果，直接使用合并后的临时对象作为dispatch的参数即可：

修改Formik的onSubmit逻辑：

onSubmit: (values) => {
  // 直接创建合并后的对象，避免依赖异步更新的state
  const newLuxmedBenefitUser = { ...userProps, ...values };
  // 如果组件后续渲染需要用到这个值，保留setState；否则可以删除这行
  setLuxmedBenefitUser(newLuxmedBenefitUser);
  resetForm();
  displayParagraphHandler();
  // 直接传递临时对象给action
  dispatch(addEditLuxmedBenefitSystemsActions.addEditBenefits(newLuxmedBenefitUser));
}

额外优化 #

如果luxmedBenefitUser这个state仅用于传递给dispatch，没有在组件其他地方使用，那可以直接删除这个state，减少不必要的状态更新逻辑，让代码更简洁。

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