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

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

交互

我用 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]);

我来解答赞 4 收藏

反馈

1 条解答

思晨~ 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