如何使用useQuery在页面中同时展示两组接口返回数据？

你遇到的问题是因为在同一个作用域中重复声明了同名的const变量，解决核心是通过解构赋值别名区分不同请求返回的状态和数据，同时给每个请求设置唯一的查询键。

正确的代码示例 #

import { useQuery } from '@tanstack/react-query';
import { getList, getNewList } from './你的接口文件路径';

function YourPage() {
  // 第一个请求：获取旧列表，通过别名区分变量
  const { 
    isLoading: isListLoading, 
    isError: isListError, 
    data: listData 
  } = useQuery(['list'], getList);

  // 第二个请求：获取新列表，同样设置别名
  const { 
    isLoading: isNewListLoading, 
    isError: isNewListError, 
    data: newListData 
  } = useQuery(['newList'], getNewList);

  // 处理加载状态
  if (isListLoading || isNewListLoading) {
    return <div>加载中...</div>;
  }

  // 处理错误状态
  if (isListError || isNewListError) {
    return <div>请求出错了</div>;
  }

  // 渲染两个列表数据
  return (
    <div>
      <h2>旧列表</h2>
      <ul>
        {listData?.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>

      <h2>新列表</h2>
      <ul>
        {newListData?.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default YourPage;

关键说明 #

• 解构别名：通过变量名: 别名的方式，把每个请求的isLoading、isError、data重命名为唯一的变量，避免作用域内变量名冲突。
• 查询键唯一性：useQuery的第一个参数（查询键）必须唯一，比如['list']和['newList']，React Query会通过这个键区分不同的缓存实例，确保两个请求的状态和数据不会互相干扰。

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