如何通过React Query调用不同API更新表格展示的已获取数据？

第一步：优化API请求函数 #

合并重复逻辑，封装成通用的成员查询函数，支持动态传入排序、分页及状态参数：

// Api 
export const getMembers = async ({ 
  orderBy = "FirstName", 
  order = "DESC", 
  pageNumber = 1, 
  pageSize = 50, 
  status = "Enrolled" 
}) => {
  const response = await MemberApi.get(`/query?orderBy=${orderBy}&order=${order}&pageNumber=${pageNumber}&pageSize=${pageSize}&status=${status}`);
  return response.data;
};

第二步：重构组件实现排序功能 #

利用React Query的queryKey特性，将排序参数纳入缓存标识，参数变化时自动触发新查询；同时用状态管理当前排序规则，点击表头时更新状态：

// Members
import { useQuery } from '@tanstack/react-query';
import { useState } from 'react';
import { getMembers } from './api';

function Members() {
  // 管理当前排序字段和方向
  const [sortConfig, setSortConfig] = useState({
    key: 'FirstName',
    direction: 'DESC'
  });

  // 排序参数加入queryKey，参数变化自动触发新查询
  const { data: enrolled, isLoading } = useQuery({
    queryKey: ["enrolled", sortConfig],
    queryFn: () => getMembers({
      orderBy: sortConfig.key,
      order: sortConfig.direction,
      pageSize: 50,
      status: "Enrolled"
    })
  });

  // 表头点击事件：切换排序字段或反转方向
  const handleHeaderClick = (key) => {
    let direction = 'ASC';
    if (sortConfig.key === key && sortConfig.direction === 'ASC') {
      direction = 'DESC';
    }
    setSortConfig({ key, direction });
  };

  if (isLoading) return <div>加载中...</div>;
  if (!enrolled) return <div>暂无数据</div>;

  return (
    <>
      {/* 可点击表头，显示当前排序状态 */}
      <div style={{ display: 'flex', gap: '30px', cursor: 'pointer', fontWeight: 'bold' }}>
        <div onClick={() => handleHeaderClick('FirstName')}>
          姓名 {sortConfig.key === 'FirstName' && (sortConfig.direction === 'ASC' ? '↑' : '↓')}
        </div>
        <div onClick={() => handleHeaderClick('LastName')}>
          姓氏 {sortConfig.key === 'LastName' && (sortConfig.direction === 'ASC' ? '↑' : '↓')}
        </div>
      </div>

      {/* 成员列表展示 */}
      <div style={{ marginTop: '15px' }}>
        {enrolled.map((member, index) => (
          <div key={index} style={{ padding: '8px 0' }}>
            {member.firstName} {member.lastName}
          </div>
        ))}
      </div>
    </>
  );
}

关键修正与说明 #

• 自动触发查询：将排序参数加入queryKey，React Query会自动识别参数变化并发起新请求，替代原代码中手动调用setQueryData的异步错误写法。
• 排序状态切换：点击表头时，若点击的是当前排序字段则反转方向，否则切换为该字段的升序排序，符合常规表格交互逻辑。
• 状态处理：补充加载状态与空数据判断，避免因数据未返回导致的渲染报错。

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