react-table v7 useSortBy点击列时aria-sort错误设置到相邻列

问题根源 #

你遇到的问题是因为渲染表头<th>时，错误使用了全局/共享的排序状态变量，而非react-table为每一列column实例提供的内置排序属性。当触发排序时，react-table只会更新当前点击列的isSorted和isSortedDesc属性，但你的判断逻辑未绑定当前列的这两个属性，导致所有列复用同一状态，出现相邻列aria-sort被错误修改的情况。

修复代码 #

将表头的aria-sort属性判断逻辑，改为基于当前列column对象的内置属性：

<th
  {...column.getHeaderProps(column.getSortByToggleProps())}
  aria-sort={
    column.isSorted
      ? column.isSortedDesc
        ? 'descending'
        : 'ascending'
      : 'none'
  }
>
  {column.render('Header')}
  {/* 可选：添加可视化排序指示器 */}
  {column.isSorted ? (column.isSortedDesc ? ' 🔽' : ' 🔼') : ''}
</th>

关键说明 #

react-table的每一列column对象自带以下排序相关属性：

• column.isSorted：当前列是否处于排序状态（布尔值）
• column.isSortedDesc：当前列是否为降序排序（布尔值）

直接引用这两个属性后，每一列的aria-sort会独立响应自身的排序状态，不会再出现跨列干扰的问题。修改后点击“First Name”列时，只有该列的aria-sort会根据排序方向切换，其他列保持none状态。

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