React+TypeScript中如何将React Query获取数据赋值给嵌套数组

方法一：在onSuccess中主动获取数据并赋值 #

先通过useQueryClient获取React Query的客户端实例，然后在onSuccess回调里直接调用fetchQuery获取详情数据，再用react-hook-form的setValue把数据赋值给nestedArray：

import { useQueryClient } from '@tanstack/react-query';
import { useForm } from 'react-hook-form';

// 组件内获取queryClient和表单方法
const queryClient = useQueryClient();
const { setValue, resetField } = useForm();

// mutateAsync的配置
await mutateAsync(
  { dataWithDisplayOrder },
  {
    onSuccess: async (responseid: string | number) => {
      setResponseId(responseid);
      resetField('nestedArray');

      // 主动请求详情数据
      const savedDetails = await queryClient.fetchQuery({
        queryKey: ['savedDetails', responseid],
        queryFn: async () => {
          const res = await fetch(`/your-api-url/${responseid}`);
          if (!res.ok) throw new Error('获取详情失败');
          return res.json();
        },
      });

      // 将数据赋值给表单的nestedArray字段
      setValue('nestedArray', savedDetails);
    },
    onError: (error) => {
      // 错误处理逻辑
      console.error(error);
    },
  }
);

方法二：利用已有的useQuery监听数据变化 #

如果你已经有一个根据responseId获取详情的useQuery实例，可以监听数据变化后自动赋值：

// 定义获取详情的useQuery
const { data: savedDetails } = useQuery({
  queryKey: ['savedDetails', responseId],
  queryFn: () => fetch(`/your-api-url/${responseId}`).then(res => res.json()),
  enabled: !!responseId, // 只有当responseId存在时才发起请求
});

// 监听savedDetails变化，赋值给nestedArray
useEffect(() => {
  if (savedDetails) {
    setValue('nestedArray', savedDetails);
  }
}, [savedDetails, setValue]);

// mutateAsync的配置
await mutateAsync(
  { dataWithDisplayOrder },
  {
    onSuccess: (responseid: string | number) => {
      setResponseId(responseid);
      resetField('nestedArray');
    },
    onError: (error) => {
      console.error(error);
    },
  }
);

注意事项 #

• 确保API返回的数据结构和nestedArray所需的结构完全匹配，否则表格展示会出现异常
• 给responseid和savedDetails定义明确的TypeScript类型，避免使用any
• 如果使用fetchQuery，记得处理请求失败的情况，避免未捕获的错误

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