Next.js中React-hook-form默认值加载时表单字段闪空问题排查

问题分析 #

你遇到的闪屏问题本质是客户端组件的渲染时机差异：

• 你的ProfileForm是标记了"use client"的客户端组件，在Next.js App Router的服务器渲染阶段，这类组件只会生成无逻辑的静态HTML骨架，不会执行react-hook-form的初始化逻辑。
• 只有当客户端JavaScript加载完成后，react-hook-form才会读取defaultValues并填充表单字段，这就导致了初始页面显示空输入框，之后突然填充内容的闪屏效果。

解决方案 #

直接利用服务器已经获取到的data，在表单元素上显式设置服务器端可见的初始值，让服务器渲染的HTML直接包含表单数据，避免客户端加载后的二次填充。

修改表单组件代码 #

在你的ProfileForm中，给每个输入字段加上对应的defaultValue（对应data中的属性）：

"use client"

import { UserType } from '@/types/UserType'
import * as Checkbox from '@radix-ui/react-checkbox'
import { CheckIcon } from '@radix-ui/react-icons'
import Link from "next/link"
import React from "react"
import { useForm, SubmitHandler } from "react-hook-form"

type Inputs = {...} // 保持你的类型定义

export default function ProfileForm({ data }: { data: UserType}) {
  const {
    register,
    handleSubmit,
    setError,
    formState: { errors }
  } = useForm<Inputs>({ defaultValues: data }) // 保留这行，确保表单逻辑的默认值正确

return (
  // ... 其他代码不变
  <input
    {...register("name")}
    name="name"
    type="text"
    defaultValue={data.name} // 新增：服务器渲染时直接填充值
    className="bg-transparent border-b border-purple-2" 
  />
  <p className="text-xs text-red-600 mt-1 h-4">
    {errors.name && errors.name.message}
  </p>

  // 如果是Checkbox组件，同理设置defaultChecked
  <Checkbox.Root
    {...register("isActive")}
    defaultChecked={data.isActive} // 服务器端直接设置默认选中状态
    className="..."
  >
    <Checkbox.Indicator>
      <CheckIcon />
    </Checkbox.Indicator>
  </Checkbox.Root>
  // ... 其他代码不变
)
}

为什么这样有效？ #

服务器在渲染页面时，会直接把data.name的值写入input的HTML属性中，用户打开页面看到的就是已经填充好的表单字段，不需要等待客户端JS加载完成。同时react-hook-form的defaultValues依然生效，保证表单的受控逻辑正常运行。

额外注意事项 #

• 确保data中的属性名和Inputs类型、register的字段名完全一致，避免值不匹配。
• 对于复杂表单字段（如select、textarea），同样可以用defaultValue来设置服务器端初始值。

内容的提问来源于stack exchange，提问作者RomkaLTU