提供值后Redux字段验证失败

k7fdbhmy  于 2022-11-24  发布在  其他
关注(0)|答案(1)|浏览(139)

一点背景

我有一个表单,用户需要在其中从日期选取器中选择日期,然后提交包含所选日期和一些其他预填充信息的表单。我使用Redux Field Package 包含React Date Picker的自定义组件。

问题

我正在使用Redux <Field>的validate属性,它只是强制输入值不能是未定义的。问题是,当我选择一个日期时,我看到了错误消息,我通常会在验证失败时看到。换句话说,应用程序认为日期选择器输入值是未定义的,即使它显然有一个值。

疑难排解

我通过控制台记录了此.props并检查了开发工具中的React Components选项卡,并在选择日期之前和之后观察到有问题的prop“moveInDate”。我在选择日期之前看到一个空字符串(这是预期的,因为我将空字符串设置为初始值),并且在选择日期之后看到预期值。

我还在控制台中记录了 Package 组件中的输入值,并且可以看到元素的名称和选定的值正在向下生成。
在这一点上,我不知道该看哪里。一切都在更新,因为它应该从我可以告诉,但应用程序仍然认为输入有一个未定义的值。我觉得我错过了一些东西,因为它涉及到处理输入与Redux。这是有用的注意,我正在使用这个字段实现在另一个页面上的应用程序,我推测在父组件的其他地方一定有什么东西扰乱了状态,但是我不确定要寻找什么。
与此相关的是,在选择同样 Package 在Redux <Field>中的下拉菜单时,我遇到了类似的问题:下拉选项并不总是显示,当我能够选择一个选项时,我得到了如上所述的相同的验证错误。我不想偏离主题,但我不能帮助,但感觉这些问题是相关的。
我将张贴代码,我认为这将是有帮助的,但它是相当多的整体。

字段:

<Field
  highlightDates={busyDates}
  name="moveInDate"
  type="text"
  component={DateField}
  label="Installation Date"
  onChange={moveInDate =>
    this.handleMoveInDateChange(
      moveInDate,
      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')
  }
  openToDate={
    formValues?.moveInDate ||
    this.getFirstAvailableDateForMoveIn()
  }

验证规则

export const required = value => value ? undefined : 'You can\'t leave this empty';

经办人:

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

    if (leaseLength && moveInDate) {
      this.props.formValues.moveOutDate = newMoveOutDate;
    }
  }

处理程序只是根据移入日期计算移出日期,然后将其添加到表单值中。表单中没有移出日期选择器。我认为此处理程序可能会导致问题,但它没有对移入日期(有问题的输入)执行任何操作。

**最后的想法:**我的问题确实与this one类似,但在我的例子中,问题是在输入新值时出现的,而不是在处理预加载的值时出现的。
更新我注意到在datepicker中选择日期时,值永远不会改变。我用大括号重构了validate规则,这样我就可以控制台记录参数,并且没有任何内容进入函数。相反,当我在另一个页面上使用相同的<Field>和datepicker尝试此操作时,每次我改变它时都会看到新的值。

nwnhqdif

nwnhqdif1#

我解决了redux连接代码中keepDirtyOnReinitialize: true的问题。
当我在mapStateToProps中注解掉initialValues中的赋值时,我发现日期选择器工作正常,所以看起来问题是日期选择器总是认为它有一个原始值,这就是为什么redux字段从来没有认为值发生了变化(从null到selected值),所以验证逻辑没有认为其中有任何内容!
希望这对偶然发现类似问题的人有所帮助。

相关问题