Redux Field选择值后仍验证失败问题排查求助

核心问题根源 #

你的问题本质是Redux Form的表单状态未正确更新，导致验证函数无法获取到日期选择器的最新值：

1. 自定义的DateField组件没有调用Redux Field传递的input.onChange方法，导致Redux Form内部的moveInDate字段状态始终未更新
2. 直接修改this.props.formValues的操作违反了Redux不可变状态原则，Redux Form无法感知到这个变化
3. 下拉选择框的同类问题也是同样原因：自定义组件未触发Redux Form的状态更新逻辑

分步解决方案 #

1. 修复DateField组件的状态更新逻辑 #

检查你的DateField组件，必须在日期选择变化时调用Redux Field传入的input.onChange，确保Redux Form的表单状态同步更新：

const DateField = ({ input, label, ...rest }) => {
  return (
    <div>
      <label>{label}</label>
      <ReactDatePicker
        selected={input.value}
        // 关键：调用input.onChange将选中的日期同步到Redux Form状态
        onChange={(selectedDate) => input.onChange(selectedDate)}
        {...input}
        {...rest}
      />
    </div>
  );
};

2. 修正handleMoveInDateChange的字段更新方式 #

不能直接修改this.props.formValues，必须使用Redux Form提供的change方法更新表单字段。首先确保你的组件已经通过reduxForm高阶组件包装，获取到change方法：

handleMoveInDateChange(moveInDate, leaseLength) {
  const newMoveOutDate = getMoveOutDateByMoveInDate(
    moveInDate,
    leaseLength,
    this.getBusyMoveOutDates()
  );

  if (leaseLength && moveInDate) {
    // 使用Redux Form的change方法更新moveOutDate字段
    this.props.change('moveOutDate', newMoveOutDate);
  }
}

3. 调整Field组件的onChange回调 #

确保自定义回调是在Redux Form状态更新后触发：

<Field
  highlightDates={busyDates}
  name="moveInDate"
  type="text"
  component={DateField}
  label="Installation Date"
  // 接收Redux Form传递的最新值，再执行自定义逻辑
  onChange={(value) => this.handleMoveInDateChange(value, leaseLength)}
  validate={[required, this.dateAvailable]}
  filterDate={(date) => {
    const day = date.day();
    return day !== 0 && day !== 6;
  }}
  minDate={
    mode === MODE_RENEW && formValues?.currentMoveOutDate !== null
      ? moment(formValues?.currentMoveOutDate)
      : moment().add(settings.blackoutPeriod, 'days')
  }
  maxDate={
    mode === MODE_RENEW && formValues?.currentMoveOutDate !== null
      ? moment(formValues?.currentMoveOutDate).add(1, 'week')
      : undefined
  }
  openToDate={
    formValues?.moveInDate || this.getFirstAvailableDateForMoveIn()
  }
/>

4. 下拉选择框的同类问题修复 #

按照同样逻辑检查下拉选择框的自定义组件，确保在选择选项时调用input.onChange(selectedValue)，同步更新Redux Form的字段状态。

验证排查技巧 #

可以在验证函数中添加日志，确认是否接收到值：

export const required = value => {
  console.log('required验证接收值:', value); // 打印确认值是否传递
  return value ? undefined : 'You can\'t leave this empty';
};

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