React列排序状态异常求助：切换列默认升序，同列点击切换升降序

嘿，我帮你排查下这个排序状态异常的问题～ 你的核心需求没问题，但问题出在React setState的异步特性以及你拆分状态更新的方式上，导致状态判断用了旧值，出现了点击同一列第二次仍为升序的bug。

问题根源分析 #

你现在的代码里，setStateSelectedColumn和sortedMethod是分开调用的，而且两个方法都在修改state。但React的setState是异步批量更新的，这意味着：

1. 当你点击同一列时，sortedMethod里更新previousColumn和sortedColumnName的操作还没完成，setStateSelectedColumn里的判断this.state.previousColumn !== this.state.sortedColumnName用的还是旧状态值。
2. 第二次点击同一列时，previousColumn依然是上一次的列名，所以判断条件成立，又把isAscending设为true，直到第三次点击时，状态才同步完成，这时候才会触发反转逻辑。

另外，你点击事件里的空setState({})完全没必要，反而会触发额外的重渲染，加重状态混乱。

修复方案 #

把排序相关的状态更新逻辑合并到一个setState调用中，并且使用函数式更新（setState(prevState => {...})）来获取最新的状态值，避免异步更新带来的判断错误。

具体代码修改 #

1. 移除setStateSelectedColumn方法，把它的逻辑整合到sortedMethod里：

private sortedMethod(columnName: HeaderNameDictionary) {
  // 先执行排序机制
  this.sortedMechanism(columnName);
  
  // 使用函数式更新获取最新状态，保证判断逻辑准确
  this.setState(prevState => {
    // 判断当前点击的列是否和上次排序的列一致
    const isSameColumn = prevState.sortedColumnName === columnName;
    
    return {
      previousColumn: prevState.sortedColumnName,
      sortedColumnName: columnName,
      // 新列默认升序，同一列则切换升降序
      isAscending: isSameColumn ? !prevState.isAscending : true
    };
  });
}

2. 简化点击事件，只调用sortedMethod即可（去掉多余的空setState和setStateSelectedColumn调用）：

<th>
  Product Code
  <span 
    className={this.getHeaderName(HeaderNameDictionary.PRODUCT_CODE)} 
    onClick={() => this.sortedMethod(HeaderNameDictionary.PRODUCT_CODE)} 
  />
</th>

逻辑验证 #

• 第一次点击新列：isSameColumn为false，isAscending被设为true（默认升序），同时更新排序列状态。
• 点击同一列：isSameColumn为true，isAscending会反转（true→false→true...），完全符合你的需求。

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