NextJs react-hook-form 不显示传入的值

Question

我正在使用 NextJs（应用程序路由器）作为我的前端。我在服务器层加载数据并将值传递给“仅限客户端”UI 组件。

React-hook-form 未显示作为争论提供的值。当值传递到页面时，不需要 useEffect。

当我记录传递的值时，它会显示预期值。

您可以帮助确定为什么表单不显示值吗？

UI页面标题：

 export default function PersonalDetailsUI({
 userAccount,
 }: {
    userAccount: USER_TYPE;
 }) {..... }

默认值

const defaultValues: USER_CONTACT_TYPE = {
    id: userAccount.id,
    title: userAccount.title,
    displayName: userAccount.displayName,
    firstName: userAccount.firstName,
    lastName: userAccount.lastName,
    email: userAccount.email,
    mobPhone: userAccount.mobPhone,
    street: address.street,
    street2: address.street2,
    town: address.town,
    county: address.county,
    postCode: address.postCode,
    birthDate: userAccount.birthDate,
}

传入默认值的useForm

const {
    control,    
    formState: { errors },
    handleSubmit,
    reset,
} = useForm<USER_CONTACT_TYPE>({defaultValues});

使用控制器显示数值：

<Controller
                            name="title"
                            control={control}
                            
                            render={({ field, fieldState }) => (
                                <>
                                    <label
                                        htmlFor={field.name}
                                        className={classNames({
                                            'p-error': errors.title,
                                        })}></label>
                                    <span className="p-float-label">
                                        <InputText
                                            id={field.name}
                                            autoFocus={true}
                                            width={'100%'}
                                            className={classNames({
                                                'p-invalid': fieldState.error,
                                            })}
                                            onChange={(e) => field.onChange(e.target.value)}
                                        />
                                        <label htmlFor={field.name}>Title</label>
                                    </span>
                                    {getFormErrorMessage(field.name)}
                                </>
                            )}
                        />

谢谢你

Answer 1

您似乎遇到了一个常见问题，即在 Next.js 应用程序中使用 Controller 组件时，React Hook Form 未显示默认值。这可能是由与数据加载方式和时间以及分配给表单的默认值的时间相关的几个不同原因引起的。

useEffect(() => {
  reset({
    id: userAccount.id,
    title: userAccount.title,
    displayName: userAccount.displayName,
    firstName: userAccount.firstName,
    lastName: userAccount.lastName,
    email: userAccount.email,
    mobPhone: userAccount.mobPhone,
    street: address.street,
    street2: address.street2,
    town: address.town,
    county: address.county,
    postCode: address.postCode,
    birthDate: userAccount.birthDate,
  });
}, [reset, userAccount, address]);

还要确保控制器的正确使用

<Controller
  name="title"
  control={control}
  render={({ field, fieldState }) => (
    <>
      <label htmlFor={field.name} className={classNames({'p-error': 
errors.title})}></label>
      <span className="p-float-label">
        <InputText
          id={field.name}
          autoFocus={true}
          width={'100%'}
          className={classNames({'p-invalid': fieldState.error})}
          onChange={e => field.onChange(e.target.value)}
          value={field.value}  // Make sure this is included
        />
        <label htmlFor={field.name}>Title</label>
      </span>
      {getFormErrorMessage(field.name)}
    </>
  )}
/>

最后尝试使用调试助手进行调试

console.log("Form Values:", watch());