React Hook Form 中如何动态设置默认值？

端木小倩提问于 2026-03-02 01:35:25 阅读 57

交互

我用 React Hook Form 做一个编辑表单，想根据接口返回的数据动态设置默认值，但 useForm 的 defaultValues 似乎只在初始化时生效一次，后续数据变了也不更新。试过用 reset()，但总感觉哪里不对。

比如下面这样写，user 初始是 null，等异步加载完后 setDefaultValues 没反应：

const { control, reset } = useForm({
  defaultValues: {
    name: user?.name || '',
    email: user?.email || ''
  }
});

useEffect(() => {
  if (user) {
    reset({ name: user.name, email: user.email });
  }
}, [user]);

我来解答赞 6 收藏

反馈

2 条解答

继芳 ☘︎ Lv1

这个问题我也踩过坑，React Hook Form的文档里其实讲得很清楚。defaultValues确实只在初始化时生效，reset才是动态设置值的正确方式。

你的代码思路是对的，但可能漏了一个关键点。标准写法应该是这样：

const { control, reset } = useForm();



useEffect(() => {

  if (user) {

    reset({

      name: user.name,

      email: user.email

    });

  }

}, [user, reset]); // 注意这里要把reset加入依赖

重点有两个：
1. 不要在useForm里初始化defaultValues，空着就行
2. useEffect的依赖数组必须包含reset，不然闭包问题会导致reset不更新

另外如果你需要保留部分表单值只更新某些字段，可以用reset的第二个参数：
reset({ name: user.name }, { keepDefaultValues: true })

这个坑我去年也踩过，后来在React Hook Form的issue区找到解决方案。他们文档里reset的说明确实不太显眼。

2026-03-09 12:03

思晨~ Lv1

这问题我遇到过八百遍了，最省事的懒人方案就是——数据没来之前别渲染表单，等 user 加载完再挂载组件，defaultValues 自然就是最新的值。

const { control } = useForm({

  defaultValues: {

    name: user?.name || '',

    email: user?.email || ''

  }

});



// 懒人方案：没数据就别渲染表单

if (!user) return 加载中...
;



return ...
;

如果你非要渲染表单然后用 reset，记得把 reset 放进依赖数组里，不然会有闭包坑：

useEffect(() => {

  if (user) {

    reset({

      name: user.name,

      email: user.email

    });

  }

}, [user, reset]);

2026-03-02 02:00