React实现点击表格表头切换升序/降序排序功能

需求说明 #

开发React表格组件时，已完成点击表头触发对应列排序的基础逻辑，需要补充交互效果：点击同一列表头第二次时自动反转排序顺序，即升序转降序、降序转升序。

初始实现（仅支持单方向排序） #

最初编写的基础排序函数仅支持固定方向排序，代码如下：

function handleHeaderClick(clickedHeader) {
  const newdata = [...data].sort((a, b) => (a[clickedHeader] > b[clickedHeader] ? 1 : -1));
  setdata((prevdata) => newdata);
}

前期尝试直接通过var、let关键字声明普通变量存储排序方向，始终无法实现预期的切换效果。

问题原因：React函数组件每次重渲染都会重新执行完整的函数逻辑，普通声明的变量不会被状态机制持久化保存，每次渲染都会被重置为初始值，无法记录上一次点击后的排序方向。

最终可行实现 #

通过React内置的useState Hook 持久化维护排序方向状态，即可实现点击切换排序规则的效果，核心代码如下：

import { useState } from 'react';

// 排序方向状态：默认值true对应降序，可根据业务需求调整初始排序方向
const [order, setOrder] = useState(true);

function handleHeaderClick(clickedHeader) {
  // 点击表头时先切换排序方向状态
  setOrder(!order);
  // 根据当前排序状态生成排序后的数据
  const newdata = props.data.sort((a, b) => {
    const valA = a[clickedHeader];
    const valB = b[clickedHeader];
    if (order && valA > valB) return -1;
    return 1;
  });
  props.setdata(newdata);
}

踩坑提示 #

• 不要在函数组件中用普通var/let变量存储需要跨渲染周期保留的交互状态，这类变量不会被React的状态机制追踪，值会在组件重渲染时重置
• 数组的sort方法会直接修改原数组，如果不希望改动原始数据源，可以先通过扩展运算符对数组做浅拷贝再执行排序，即[...props.data].sort(...)，避免直接修改原状态引发的渲染异常
• 如果表格支持点击不同列切换排序字段，建议额外新增一个状态记录当前激活排序的字段标识，避免切换列时排序方向逻辑错乱

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