React Hook Form dirtyFields 返回不完整/缺失的应该是脏的字段

Question

我的表单中的一个字段endTimeMins似乎没有注册到 formState。我有四个字段，所有字段都没有脏问题，我可以将它们读取为脏字段，但不能读取endTimeMins字段。其他信息，我正在使用 MUI v4 作为我的输入组件。

我以可重用的方式创建了输入字段。总的来说，它渲染了 4 个字段。

首先是我的 startTimeHour/endTimeHour。

   <Controller
      name={`${timeType}Hour`}
      control={control}
      rules={{ required: true, validate: () => _isEndGreaterThanStart() || errorMsgs.endNotGreater }}
      render={({ field: { onChange, value, name, onInputChange } }) => (
        <Controls.SingleAutoComplete
          name={`${timeType}Hour`}
          disableClearable
          freeSolo
          value={value.toString()}
          inputValue={value}
          className={classes.autoCompleteInput}
          error={!!errors[name]?.message}
          options={HOURS_OPTIONS.map((option) => option.value)}
          onChange={(e, newValue) => {
            onChange(newValue);
            _handleStartEndRelation(name, newValue);
          }}
          onInputChange={(e, newValue) => {
            onChange(handleTimeInputs(newValue, 12).toString()); //handle unwanted inputs
            _handleStartEndRelation(name, newValue);
          }}
        />
      )}
    />

这是我的 startTimeMins/ endTimeMins

<Controller
      name={`${timeType}Mins`}
      control={control}
      rules={{ required: true }}
      render={({ field: { onChange, value, name, onBlur } }) => (
        <Controls.SingleAutoComplete
          name={`${timeType}Mins`}
          options={MINS_OPTIONS.map((option) => option.value)}
          getOptionDisabled={(option) => option === MINS_OPTIONS[4].value}
          disableClearable
          className={classes.autoCompleteInput}
          freeSolo
          error={!!errors.endTimeHour?.message && name === 'endTimeMins'}
          value={value.toString()}
          inputValue={value}
          onChange={(e, newValue) => {
            onChange(newValue);
            trigger('endTimeHour');
          }}
          onInputChange={(e, newValue) => {
            onChange(handleTimeInputs(newValue, 59, true).toString()); 
            _handleStartEndRelation(name, handleTimeInputs(newValue, 59, true).toString());
            
          }}
          onBlur={() => {  
            if (value.length === 1) {
              onChange(`0${value}`);
              _handleStartEndRelation(name, `0${value}`);
             
            }
          }}
        />
      )}
    />

我还展示了处理输入之间关系的函数。这基本上只是在 startTime 的基础上增加 endTime 。

  const _handleStartEndRelation = (name, value) => {
    if (name === 'startTimeHour' && value !== '0') {
      if (value === '12') {
        setValue('endTimeHour', '1');
      } else if (value === '') {
        setValue('endTimeHour', '');
      } else {
        setValue('endTimeHour', +value + 1);
      }
    }

    if (name === 'startTimeMins') {
      setValue('endTimeMins', value);
    }

    trigger('endTimeHour');
  };

尽管如此，我在获取或设置字段的值时没有任何问题。只是当我检查时，我的字段 endTime 的 isDirty 状态未定义，console.log(_getFieldState('endTimeMins').isDirty);当我使用它检查时，它从 dirtyFields 中丢失console.log(dirtyFields);

我确保我也将其设置为defaultValues。

  const {
    handleSubmit,
    setValue,
    getValues,
    _getFieldState,
    trigger,
    control,
    reset,
    formState: { isDirty, dirtyFields, isValid, errors }
  } = useForm({
    defaultValues: {
      OFIdate: new Date(),
      startTimeHour: '',
      endTimeHour: '',
      startTimeMins: '',
      endTimeMins: ''
    },
    mode: 'onChange'
  });

我在这里可能会缺少什么？我将我的代码字段相互比较，这对我来说并没有那么不同。那么为什么会发生这种情况呢？

Answer 1

找到了解决方案。

setValue('name', 'value', { shouldDirty: true })

我想当我需要使用 设置字段值时setValue()，如果它们脏了，我还必须手动设置。