如何在React Hook Form中为编辑场景设置API返回数据？

针对你使用React Hook Form的场景，有两种常用方式实现编辑时填充API数据：

方式一：初始化时设置默认值（同步/提前获取数据） #

如果编辑所需的数据在组件初始化时就能拿到（比如从路由参数获取ID后同步查询，或父组件传递），可以直接在useForm中配置defaultValues：

// 假设从API获取的编辑数据为editData，实际替换为真实API返回值
const editData = { id: "12345" }; 

const {
  register,
  handleSubmit,
  formState: { errors },
} = useForm({
  defaultValues: {
    id: editData.id // 将API返回的ID赋值给对应字段
  }
});

// 编辑场景需替换为更新接口，而非新增接口
const onSubmit = handleSubmit((data) => {
  updatePlugin(data);
});

return (
  <form onSubmit={onSubmit}>
    <TextInput
      label="Facebook Analytic Pixel id"
      name="id"
      register={register}
      rules={{ required: "This is a required field" }}
      error={errors?.id?.message}
    />
  </form>
);

方式二：异步获取数据后动态设置值（API请求在组件挂载后） #

如果数据需要在组件挂载后通过异步API请求获取，使用useForm提供的setValue方法，配合useEffect执行请求：

const {
  register,
  handleSubmit,
  formState: { errors },
  setValue // 从useForm中解构出setValue方法
} = useForm();

// 编辑场景替换为更新接口
const onSubmit = handleSubmit((data) => {
  updatePlugin(data);
});

// 组件挂载后发起API请求获取编辑数据
useEffect(() => {
  const fetchEditData = async () => {
    try {
      const response = await fetch("/api/get-plugin-data"); // 替换为你的API地址
      const editData = await response.json();
      // 将API返回的ID设置到表单字段
      setValue("id", editData.id);
    } catch (error) {
      console.error("获取编辑数据失败:", error);
    }
  };

  fetchEditData();
}, [setValue]);

return (
  <form onSubmit={onSubmit}>
    <TextInput
      label="Facebook Analytic Pixel id"
      name="id"
      register={register}
      rules={{ required: "This is a required field" }}
      error={errors?.id?.message}
    />
  </form>
);

额外注意事项 #

• 若你的TextInput是自定义受控组件，register方式不生效时，可配合Controller组件处理：

import { Controller } from "react-hook-form";

// 在表单中替换为Controller包裹TextInput
<Controller
  name="id"
  control={control} // 需从useForm中解构出control
  rules={{ required: "This is a required field" }}
  render={({ field }) => (
    <TextInput
      label="Facebook Analytic Pixel id"
      {...field}
      error={errors?.id?.message}
    />
  )}
/>

• 编辑场景下务必将提交逻辑改为调用更新接口，不要继续使用新增的installNewPlugin方法。

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