React JS中表格排序图标无法正确切换问题求助

核心问题 #

当前changeSort函数存在逻辑缺陷：切换排序列时，直接复用并翻转全局的sortOrder状态，未区分新点击列与当前已排序列。导致点击新列时，旧列的图标状态被错误修改，新列的图标无法正确显示初始排序状态。

修复代码 #

function changeSort(key: SortKeys) {
  // 点击当前已排序列时切换排序顺序，点击新列默认设为升序
  setSortOrder(sortKey === key ? (sortOrder === "ascn" ? "desc" : "ascn") : "ascn");
  setSortKey(key);
}

逻辑说明 #

• 若点击的列等于当前正在排序的列：翻转排序顺序（升序↔降序）
• 若点击的列不等于当前排序列：将新列的排序状态默认设为升序，同时更新排序列标识为新列的key

修改后每列的排序状态会独立维护，点击新列时，新列显示对应排序图标，旧列恢复未激活状态，实现各列图标的独立更新。

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