React Hook Form 无法根据API响应更新表单默认值该如何修复？

问题原因 #

React Hook Form的useForm仅在组件首次渲染时读取defaultValues完成表单初始化。异步获取的warehouseResult是在组件渲染完成后才返回的，此时useForm已初始化完毕，不会自动同步新值。另外你的代码存在变量名错误：defaultValues中使用的warehouse未定义，实际应为API返回的warehouseResult。

解决方案 #

通过useForm提供的reset方法，在异步数据获取成功后手动重置表单值。

修正后的代码示例 #

import { FormProvider, useForm } from "react-hook-form";

const Test = () => {
  const {
    mutate,
    isLoading: searchLoading,
    data: warehouseResult,
  } = useWarehouseSearchByField();

  // 初始化表单，默认值设为空占位符
  const formProps = useForm({
    mode: "onChange",
    defaultValues: {
      warehousename: "",
      warehousecode: "",
      address: "",
    },
  });
  const { reset, register, handleSubmit } = formProps;

  useEffect(() => {
    mutate(
      { warehouseCode: warehouseId },
      {
        onSuccess: (data) => {
          // 数据获取成功后，用reset同步表单值
          reset({
            warehousename: data.warehouseName,
            warehousecode: data.warehouseCode,
            address: data.warehouseAddress,
          });
        },
      }
    );
  }, [warehouseId, mutate, reset]);

  // 也可以通过监听warehouseResult变化触发reset（二选一即可）
  // useEffect(() => {
  //   if (warehouseResult) {
  //     reset({
  //       warehousename: warehouseResult.warehouseName,
  //       warehousecode: warehouseResult.warehouseCode,
  //       address: warehouseResult.warehouseAddress,
  //     });
  //   }
  // }, [warehouseResult, reset]);

  return (
    <FormProvider {...formProps}>
      <ConfirmationDialog
        isOpen={isEditRoleDialogOpen}
        title="Edit Warehouse"
        content={<CreateWarehouse register={register} />}
        onConfirm={handleSubmit(handleEditWarehouseConfirm)}
        onClose={() => setIsEditRoleDialogOpen(false)}
        cancelBtnText="Cancel"
        confirmBtnText="Confirm"
      />
    </FormProvider>
  );
};

关键要点 #

• 修正变量名：用warehouseResult替代代码中未定义的warehouse
• 使用reset方法同步异步数据，这是React Hook Form官方推荐的异步数据更新方式
• 将reset加入useEffect依赖数组，避免闭包导致的逻辑异常

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