Next.js场景下useEffect拉取数据后useForm()未更新问题求助

问题根因 #

React Hook Form 的 defaultValues 仅在组件初始化、useForm 实例创建时读取一次。你组件首次渲染时，storedResume 还是初始的空对象，等 useEffect 异步拉取到数据、更新 storedResume 后，useForm 不会自动同步新的状态值，因此表单不会更新。

解决方案 #

直接调用 useForm 暴露的 reset 方法手动更新表单数据即可，修改代码如下：

1. 先从 useForm 返回值中导出 reset 方法：

const { register, handleSubmit, watch, formState: { errors }, reset } = useForm<any>({
    resolver: yupResolver(schema),
    defaultValues: {},
});

2. 修改 useEffect，拿到接口返回的简历数据后调用 reset 方法同步到表单，同时补充必要的请求判断和依赖项，避免异常请求：

useEffect(() => {
    // 等待用户信息加载完成后再发请求，避免路径参数错误
    if (!user?.sub) return;
    async function fetchData() {
      const res = await fetch(process.env.NEXT_PUBLIC_API + `/resume/${user.sub.split('|')[1]}`);
      const data = await res.json();
      const resumeData = data?.resume || {};
      updateResume(resumeData);
      // 手动将数据同步到表单
      reset(resumeData);
    }
    fetchData();
}, [user?.sub, reset]);

额外优化建议 #

如果你的场景不需要单独维护 storedResume 状态，可以直接删除这个 useState，直接用 watch 方法从 useForm 中读取表单实时值，减少冗余状态的维护成本。

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