Material-React-Table 远程数据获取异常问题解析

问题背景

在使用 Material-React-Table (MRT) 结合 React Query 和 Axios 进行远程数据获取时，开发者遇到了一个奇怪的现象：当点击列标题进行排序时，会触发两次请求 - 第一次带有排序参数，第二次又回到了初始的无排序状态请求。

技术栈分析

该问题涉及以下关键技术组件：

• Material-React-Table (v2.13.3)：一个基于 Material-UI 的 React 数据表格组件
• React Query：用于数据获取和状态管理
• Axios：HTTP 客户端库
• TypeScript：类型安全的 JavaScript 超集

问题现象详细描述

1. 初始加载时，表格正确发出请求：/suppliers?page=1&pageSize=100
2. 点击列标题排序后，发出带有排序参数的请求：/suppliers?page=1&pageSize=100&orderBy=name&orderDirection=desc
3. 但随后又立即发出初始的无排序请求，导致表格无法保持排序状态

值得注意的是，分页和全局过滤功能工作正常，只有排序操作会出现这种双重请求现象。

问题排查过程

开发者首先排除了 React StrictMode 的影响，因为应用并未启用该模式。然后尝试了官方示例中的 URL 构造方式，发现可以正常工作，但项目需要使用 Axios 实现。

关键发现出现在对 MaterialReactTable2Api() 函数的检查中。这个函数负责将 MRT 的查询参数转换为 API 所需的格式。问题根源在于该函数内部对 query.order 参数进行了 pop() 操作，这种直接修改输入参数的行为导致了 React Query 的依赖数组发生变化，从而触发了额外的请求。

解决方案

修复方案很简单：避免直接修改输入参数。在参数转换函数中，应该创建参数的副本进行操作，而不是直接修改原始参数。

// 错误做法 - 直接修改输入参数
function MaterialReactTable2Api(query) {
  query.order.pop(); // 这会改变原始参数
  // ...其他转换逻辑
}

// 正确做法 - 创建副本
function MaterialReactTable2Api(query) {
  const processedQuery = {...query};
  if (processedQuery.order) {
    processedQuery.order = [...processedQuery.order];
    // 安全地进行操作
  }
  // ...其他转换逻辑
  return processedQuery;
}

经验总结

1. 不可变数据原则：在 React 生态系统中，保持数据的不可变性非常重要，特别是在状态管理和副作用处理中。
2. React Query 依赖数组：React Query 的 queryKey 数组会深度比较其内容，任何变化都会触发重新获取数据。
3. 副作用排查：当遇到意外的重新渲染或数据获取时，应检查所有可能修改输入参数的函数。
4. 调试技巧：可以使用 React DevTools 和 React Query DevTools 来观察状态变化和查询触发情况。

这个问题虽然最终解决方案简单，但排查过程体现了 React 应用中状态管理的微妙之处，也提醒我们在编写工具函数时要特别注意避免副作用。