使用redux-form单次表单变更两次dispatch仅生效一次的问题求助

我来帮你解决这个redux-form里的棘手问题～你遇到的情况是：想在一次表单操作里更新两个字段（startDate和endDate），但不管是分两次调用dispatch，还是把两个action塞到同一个dispatch里，都只有第一个action生效，第二个字段不仅没更新还报错。

先再明确下你的代码场景：

handleEvent(event, picker) { 
  let changeStartDate = change('FilterForm', 'startDate', picker.startDate); 
  let changeEndDate = change('FilterForm', 'endDate', picker.endDate); 
  this.props.dispatch(changeStartDate); 
  this.props.dispatch(changeEndDate); 
}

你后来还试了this.props.dispatch(changeStartDate, changeEndDate)，结果还是只有第一个参数对应的字段更新，换位置也只生效第一个，这个问题的核心原因是redux-form的change action在同步连续触发时，会因为表单内部状态还未完全更新，导致第二个action被拦截或覆盖。

下面给你几种靠谱的解决方法：

方法1：使用Redux的batch批量更新（推荐，适用于Redux 4.0+） #

Redux从4.0版本开始支持批量更新API，它能让多个dispatch动作被合并成一次状态更新，避免中间状态冲突。用法很简单：

import { batch } from 'redux';

handleEvent(event, picker) { 
  let changeStartDate = change('FilterForm', 'startDate', picker.startDate); 
  let changeEndDate = change('FilterForm', 'endDate', picker.endDate); 
  // 用batch包裹两个dispatch
  batch(() => {
    this.props.dispatch(changeStartDate);
    this.props.dispatch(changeEndDate);
  });
}

方法2：异步触发第二个dispatch（兼容旧版本Redux） #

如果你的Redux版本较低，不支持batch，可以用setTimeout把第二个dispatch放到宏任务队列里，等第一个dispatch的状态更新完成后再执行：

handleEvent(event, picker) { 
  let changeStartDate = change('FilterForm', 'startDate', picker.startDate); 
  let changeEndDate = change('FilterForm', 'endDate', picker.endDate); 
  this.props.dispatch(changeStartDate);
  // 用setTimeout异步执行第二个dispatch
  setTimeout(() => {
    this.props.dispatch(changeEndDate);
  }, 0);
}

方法3：自定义批量更新字段的Action（更优雅的方式） #

你可以自己写一个action创建函数，一次性处理多个字段的更新，这样只需要调用一次dispatch就能完成两个字段的更新：

// 先自定义一个批量更新表单字段的action创建函数
const changeMultipleFormFields = (formName, fieldValues) => {
  return (dispatch) => {
    // 遍历字段对象，逐个dispatch change action
    Object.entries(fieldValues).forEach(([fieldName, value]) => {
      dispatch(change(formName, fieldName, value));
    });
  };
};

// 然后在组件的handleEvent里使用
handleEvent(event, picker) { 
  this.props.dispatch(changeMultipleFormFields('FilterForm', {
    startDate: picker.startDate,
    endDate: picker.endDate
  }));
}

另外补充一句：如果你的redux-form版本比较新，也可以检查下表单配置里的enableReinitialize等参数是否有冲突，但上面三种方法基本能覆盖绝大多数场景。

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