React Query中简化useQuery数据访问路径及用法疑问解答

一、简化data.data.response.data的正确方式 #

你之前在查询函数里调用setNewdata(data)的做法无效，因为此时useQuery返回的data还未获取到（初始为undefined），且查询函数的职责仅为获取数据，不应在此处做状态更新。推荐以下几种方案：

1. 查询函数内直接处理返回结果（最优） #

在查询函数里直接把接口返回的数据处理成目标格式，让useQuery返回的data就是最终要遍历的数组，无需额外变量：

const { data: newdata, error, isLoading } = useQuery('MyQuery', async () => {
  const response = await getMyQuery();
  // 直接返回需要的数组，后续可直接用newdata.map
  return response.data.response.data || [];
});

这里通过data: newdata给返回的data重命名，直接得到简化后的变量。

2. 使用useMemo派生数据 #

如果不想修改查询函数，可通过useMemo基于useQuery的data派生所需格式，避免重复计算：

const { data, error, isLoading } = useQuery('MyQuery', getMyQuery);

// 当data变化时自动计算newdata，处理空值避免报错
const newdata = useMemo(() => {
  return data?.data?.response?.data || [];
}, [data]);

3. useEffect配合useState更新（适合需手动修改newdata的场景） #

若后续需要对newdata做手动修改，可通过useEffect监听data变化，待数据返回后再更新状态：

const [newdata, setNewdata] = useState([]);
const { data, error, isLoading } = useQuery('MyQuery', getMyQuery);

useEffect(() => {
  // 确保data存在再更新
  if (data) {
    setNewdata(data.data.response.data);
  }
}, [data]);

二、关于async写法的正确性 #

你的async写法本身没问题，但里面的setNewdata(data)完全无效——查询函数内部访问的data是useQuery返回的初始值undefined，此时接口数据还未获取到。

正确的async写法应先等待接口返回数据，再处理或直接返回，比如：

// 正确的async写法，无需额外setState
const { data, error, isLoading } = useQuery('MyQuery', async () => {
  return await getMyQuery();
});

useQuery会自动处理async函数返回的Promise，将resolve的值作为data返回。

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