如何将useQuery返回值安全应用于useForm的defaultValues？

方法1：等待数据加载完成再初始化表单 #

useQuery在请求完成前estimateData是undefined，所以可以先判断加载状态，等数据就绪后再初始化useForm，这样就能直接访问estimateData的属性：

const { data: estimateData, isLoading: isEstimateDataLoading } = useQuery<EstimateRequire>([`getOneEstimate`, estimatePk, `estimate_detail`], getOneEstimate);

// 加载中时显示占位内容，不渲染表单逻辑
if (isEstimateDataLoading) {
  return <div>加载中...</div>;
}

// 数据加载完成后，estimateData必然存在，直接取值即可
const { register, handleSubmit, watch, reset } = useForm<EstimateRequireForm>({
  defaultValues: {
    title: estimateData.title,
    product: estimateData.product,
    email: estimateData.email,
    manager: estimateData.manager,
    phone_number: estimateData.phone_number,
    content: estimateData.content,
    estimate_require_completion: estimateData.estimate_require_completion,
    memo: estimateData.memo,
  },
});

方法2：给estimateData设置类型匹配的默认值 #

解构useQuery返回值时，给data设置一个符合EstimateRequire类型的空对象作为默认值，这样即使数据还没加载，也能安全访问属性：

// 定义与EstimateRequire类型一致的默认空数据
const defaultEstimateData: EstimateRequire = {
  title: '',
  product: '',
  email: '',
  manager: '',
  phone_number: '',
  content: '',
  estimate_require_completion: '',
  memo: '',
};

const { data: estimateData = defaultEstimateData, isLoading: isEstimateDataLoading } = useQuery<EstimateRequire>([`getOneEstimate`, estimatePk, `estimate_detail`], getOneEstimate);

const { register, handleSubmit, watch, reset } = useForm<EstimateRequireForm>({
  defaultValues: {
    title: estimateData.title,
    product: estimateData.product,
    email: estimateData.email,
    manager: estimateData.manager,
    phone_number: estimateData.phone_number,
    content: estimateData.content,
    estimate_require_completion: estimateData.estimate_require_completion,
    memo: estimateData.memo,
  },
});

方法3：初始化空表单，数据加载后用reset更新 #

先给useForm设置空的defaultValues，等estimateData加载完成后，调用reset方法把数据同步到表单中：

const { data: estimateData, isLoading: isEstimateDataLoading } = useQuery<EstimateRequire>([`getOneEstimate`, estimatePk, `estimate_detail`], getOneEstimate);

const { register, handleSubmit, watch, reset } = useForm<EstimateRequireForm>({
  defaultValues: {
    title: '',
    product: '',
    email: '',
    manager: '',
    phone_number: '',
    content: '',
    estimate_require_completion: '',
    memo: '',
  },
});

// 监听estimateData变化，数据就绪时重置表单
useEffect(() => {
  if (estimateData) {
    reset({
      title: estimateData.title,
      product: estimateData.product,
      email: estimateData.email,
      manager: estimateData.manager,
      phone_number: estimateData.phone_number,
      content: estimateData.content,
      estimate_require_completion: estimateData.estimate_require_completion,
      memo: estimateData.memo,
    });
  }
}, [estimateData, reset]);

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