React Hook Form更新表单数据异常问题求助

核心问题分析 #

• 提交逻辑错误：onFormSubmit没有接收表单的新输入值，反而直接使用useQuery返回的旧数据
• react-hook-form 初始化限制：defaultValues仅在表单初始化时生效，后续defaultValues变化不会自动同步表单值
• 类型定义不严谨：大量any类型导致潜在类型错误与开发提示缺失

具体修复步骤 #

1. 修正提交逻辑，接收表单新数据 #

在countryupdate.tsx中，让onFormSubmit接收表单传递的新数据，替代原有的旧数据使用方式：

// countryupdate.tsx
const onFormSubmit = async (formData: data) => {
  console.log("mutate", formData);
  await mutateAsync({ ...formData, dataId });
};

2. 同步表单值到 react-hook-form #

在createupdateform.tsx中，通过useEffect监听defaultValues变化，调用reset方法更新表单值；同时完善类型定义：

// createupdateform.tsx
import { useEffect } from "react";
import { useForm } from "react-hook-form";

// 定义表单数据类型
interface FormData {
  name: string;
}

export const CountryCreateUpdateForm = ({ 
  defaultValues, 
  onFormSubmit, 
  isLoading 
}: {
  defaultValues?: { data: FormData };
  onFormSubmit: (data: FormData) => Promise<void>;
  isLoading?: boolean;
}) => {
  const { register, handleSubmit, reset } = useForm<FormData>({ 
    defaultValues: defaultValues?.data || { name: "" } 
  });

  // 监听defaultValues变化，重置表单值
  useEffect(() => {
    if (defaultValues?.data) {
      reset(defaultValues.data);
    }
  }, [defaultValues, reset]);

  const onSubmit = handleSubmit((data) => {
    onFormSubmit(data);
  });

  return (
    <form onSubmit={onSubmit}>
      <div>
        <label>Name</label>
        <input {...register('name')} type="text" name="name" />
      </div>
      <button type="submit" disabled={isLoading}>submit</button>
    </form>
  );
};

3. 完善路由参数类型定义 #

在countryupdate.tsx中，给useParams指定明确类型，避免使用any：

// countryupdate.tsx
interface Params {
  dataId: string;
}

export const CountryUpdatepage = () => {
  const { dataId } = useParams<Params>();
  // ... 其余代码保持不变
};

额外优化建议 #

• 给useQuery返回数据指定类型，例如useQuery<{ data: data }>(...)，获得更精准的开发提示
• 提交时添加loading状态，防止重复提交
• 处理isError状态，给用户显示错误提示

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