更新验证错误时如何使用 react-hook-form 手动重新渲染组件

Question

面临挑战使用 React-Hook-Forms 使验证类自动反映在自定义日期选择器 Flatpickr 上，

const { register, handleSubmit, errors, control } = useForm({
  mode: 'onChange'
})

<FormGroup>
  <Controller
    name="dateControl"
    control={control}
    defaultValue={null}
    rules={{ required: true }}
    render={({ value, onChange }) => (
      <Flatpickr
        value={value}
        onChange={onChange}
        id="hf-picker"
        options={{
          altInput: true,
          altFormat: 'F j, Y',
          dateFormat: 'Y-m-d',
          altInputClass: classnames(
            'form-control flatpickr-input',
            {
              'is-invalid': errors.dateControl && true
            }
          )
        }}
      />
    )}
  />
</FormGroup>

在排除故障后，我意识到一切正常，除了当 react-hooks-form 更新验证错误时组件无法重新渲染，无论如何我可以强制手动重新渲染，谢谢

Answer 1

我认为这与 RHF 无关，但不知何故，<Flatpickr /> 组件的 options 属性在配置更改时不会更新。

我假设您使用 react-flatpickr 包 - 您可以简单地将 key 属性传递给该组件并将其设置为该控件的错误对象。每次该表单控件的错误发生变化时，这都会强制重新渲染。

const isNotEmpty = (array) => array?.length > 0 || "Required";

<Controller
  name="dateControl"
  control={control}
  defaultValue={null}
  rules={{ validate: isNotEmpty }}
  render={({ value, onChange }) => (
    <>
      <Flatpickr
        key={errors.dateControl}
        value={value}
        onChange={onChange}
        id="hf-picker"
        options={{
          altInput: true,
          altFormat: "F j, Y",
          dateFormat: "Y-m-d",
          altInputClass: classnames("form-control flatpickr-input", {
            "is-invalid": !!errors.dateControl
          })
        }}
      />
      {errors.dateControl && <p>{errors.dateControl.message}</p>}
    </>
  )}
/>