点击th标签表格排序异常：total_price不生效，created_at正常求助

问题现象 #

React项目中表格排序功能异常：点击total_price对应的表头时无法触发排序，但点击created_at表头时排序正常。涉及三个组件（App、Table、ordersService）通信，怀疑handleSortData函数是否需要用useCallback优化。

核心问题分析 #

从代码中能看到几个关键错误：

1. handleSortData语法错误：函数内部使用了await但未标记为async，导致代码执行报错，无法完成排序请求。
2. 原地排序修改原始数据：ordersService中的gOrders.sort()是原地排序，会直接修改原始数组。第一次排序后原始数据被改变，后续再执行排序时，是基于已排序的数组操作，导致total_price等字段排序逻辑失效。
3. useEffect无限循环：useEffect的依赖数组包含orders，每次setOrders更新状态后，会再次触发useEffect执行fetchData，陷入无限循环，干扰排序逻辑。

解决方案 #

1. 修复handleSortData的async缺失 #

// app.jsx
const handleSortData = async (sortParam) => { // 新增async关键字
  console.log(sortParam);
  setSortBy(sortParam);
  const ordersData = await ordersService.query(sortParam);
  setOrders(ordersData);
};

2. 避免修改原始数组，复制后再排序 #

// ordersService.js
function query(sortBy) {
  // 每次排序前复制原始数组，避免修改gOrders
  const ordersCopy = [...gOrders];

  if (sortBy === 'total_price' || sortBy === 'order_ID') {
    return Promise.resolve(ordersCopy.sort((a, b) => a[sortBy] - b[sortBy]))
  } else if (sortBy === 'created_at') {
    return Promise.resolve(ordersCopy.sort((a, b) => 
      new Date(b[sortBy].date) - new Date(a[sortBy].date)
    ))
  } else {
    return Promise.resolve(ordersCopy)
  }
}

3. 修正useEffect依赖数组 #

移除orders依赖，只保留sortBy，避免无限循环：

// app.jsx
useEffect(() => {
  async function fetchData() {
    const ordersData = await ordersService.query(sortBy);
    setOrders(ordersData);
  }
  fetchData();
}, [sortBy]); // 移除orders依赖

关于useCallback的疑问 #

当前问题的根源不是useCallback，上述错误修复后排序功能即可正常工作。不过如果后续发现Table组件因handleSortData函数引用频繁变化导致不必要的重渲染，可以用useCallback包裹该函数，依赖空数组即可（因为函数内部仅依赖setSortBy和ordersService，这两个都是稳定引用）：

// app.jsx
import { useEffect, useState, useCallback } from "react";

const handleSortData = useCallback(async (sortParam) => {
  console.log(sortParam);
  setSortBy(sortParam);
  const ordersData = await ordersService.query(sortParam);
  setOrders(ordersData);
}, []);

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