如何在 react-hook-form 中动态设置 defaultValue

Question

我有一个要编辑的页面 Product，props 值取自 API，它来自父组件。如何将此值设置为我的 Datepicker 输入？因为 react-hook-form 中的 defaultValue 缓存在自定义挂钩中的第一个渲染中，所以我得到 null.

const ProductEdit = (props) => {
  const { product } = props;
  const { control, register, handleSubmit, formState: { errors } } = useForm();

  ........

  <Controller
     control={control}
     name='dateLaunch'
     defaultValue={() => {
        console.log(product); // return null
     }}
     render={({ field }) => (
        <DatePicker
           selected={field.value}
           onChange={(date) => field.onChange(date)}
        />
     )}
  />
}

默认值缓存在自定义挂钩中的第一次渲染中

Answer 1

你可以使用寄存器

    const ProductEdit = (props) => {
      const { product } = props;
      const { control, register, handleSubmit, formState: { errors } } = useForm({
           defaultValues: {
              inputOneName: props.name,
              inputTwoName: props.lastname
           }

});

Answer 2

你必须在这里使用 reset 并在 product 通过 useEffect 更改时调用它。我假设 product 有一个名为 dateLaunch 的属性。

const ProductEdit = (props) => {
  const { product } = props;
  const { control, register, handleSubmit, reset, formState: { errors } } = useForm();

  useEffect(() => {
    reset(product)
  }, [product]);
  
    
........
    
  <Controller
    control={control}
    name='dateLaunch'
    defaultValue={null}
    render={({ field }) => (
      <DatePicker
        selected={field.value}
        onChange={(date) => field.onChange(date)}
      />
    )}
  />

如何在 react-hook-form 中动态设置 defaultValue

How to dynamically set defaultValue in react-hook-form

javascript

reactjs

react-hook-form