React可排序表格需点击两次才更新排序问题求助

核心问题1：排序逻辑未响应fromTo参数 #

你的排序函数固定用a[orderBy] - b[orderBy]实现升序，但完全没用到fromTo参数控制升降方向。第一次点击表头时，你把fromTo设为descending，但排序结果还是升序，和预期不符，所以误以为点击没生效。

核心问题2：Array.sort()原地修改原始数据 #

DATA.sort()是原地排序方法，会直接篡改你硬编码的原始DATA数组。第一次排序后，原始数据就被改变了，后续所有排序都基于修改后的数组，导致结果混乱，这也是两次点击才“生效”的关键诱因。

核心问题3：表头点击未实现排序方向切换 #

当前onHeaderClick每次点击都强制设为descending，没有根据当前排序状态切换方向，不符合常规表格交互逻辑，进一步加剧了排序行为的不符合预期。

修复代码 #

1. 修正useFetch的排序逻辑

export const useFetch = (order) => {
  const [data, setData] = useState([...DATA]); // 初始化为原始数据副本
  const orderBy = order?.by || 'offer_id';
  const fromTo = order?.fromTo || SORTING_ORDER.ascending;

  useEffect(() => {
    if (!orderBy || !fromTo) return;

    // 复制原始数据，避免修改原数组
    let orderedData = [...DATA].sort((a, b) => {
      const diff = a[orderBy] - b[orderBy];
      // 根据fromTo切换升降序
      return fromTo === SORTING_ORDER.descending ? -diff : diff;
    });
    setData(orderedData);

  }, [orderBy, fromTo]);

  return { data, status };
};

2. 修正表头点击的排序切换逻辑

export const AcceptedOffers = ({ setModalIsOpen }) => {
  const [order, setOrder] = useState({ by: 'maturity', fromTo: SORTING_ORDER.ascending });
  const { data, status } = useFetch(order);

  function onHeaderClick(header) {
    setOrder(prevOrder => {
      // 点击当前排序列：切换方向；点击新列：默认升序（可自行调整）
      if (prevOrder.by === header) {
        return {
          ...prevOrder,
          fromTo: prevOrder.fromTo === SORTING_ORDER.ascending 
            ? SORTING_ORDER.descending 
            : SORTING_ORDER.ascending
        };
      } else {
        return { by: header, fromTo: SORTING_ORDER.ascending };
      }
    });
  }

  // 其余组件代码不变...
};

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