React+JavaScript表格表头排序问题：二次点击同一表头失效

看起来你的问题大概率出在全局变量管理排序方向以及排序逻辑的状态同步上。咱们一步步来排查和修复：

问题根源分析 #

你代码里的let order = 'desc';是全局变量，组件重新渲染时不会追踪它的变化，而且当点击同一表头（比如姓名）时，可能没有正确切换排序方向，导致排序逻辑没有触发更新。另外，你的state只存了sort: null，没有记录当前的排序方向，这也会导致无法判断是否需要反转排序。

修复后的完整代码 #

import React, { Component } from 'react';
import { Route, Link, Redirect, NavLink } from 'react-router-dom';
import UbicationForm from './UbicationForm';

class TableCiudades extends Component {
  // 把排序字段和方向都放到state里，代替全局变量
  state = {
    sortField: null,
    sortDirection: 'desc' // 默认排序方向
  };

  sortCiudades = (ciudades, label) => {
    // 映射表头文字到数据字段，根据你的实际数据结构调整
    const fieldMap = {
      '姓名': 'name',
      // 其他表头对应的字段，比如「城市」对应'city'，按需添加
    };
    const targetField = fieldMap[label];
    
    if (!targetField) return ciudades;

    // 复制原数组，避免直接修改原数据（符合React不可变数据原则）
    const sortedList = [...ciudades];
    
    // 判断是否点击同一表头：是则反转排序方向，否则用默认desc
    const newDirection = this.state.sortField === targetField 
      ? (this.state.sortDirection === 'asc' ? 'desc' : 'asc') 
      : 'desc';

    // 执行排序逻辑
    sortedList.sort((a, b) => {
      if (a[targetField] < b[targetField]) {
        return newDirection === 'asc' ? -1 : 1;
      }
      if (a[targetField] > b[targetField]) {
        return newDirection === 'asc' ? 1 : -1;
      }
      return 0;
    });

    // 更新state，触发组件重新渲染
    this.setState({
      sortField: targetField,
      sortDirection: newDirection
    });

    return sortedList;
  };

  render() {
    // 基于当前排序状态处理数据源
    const sortedCiudades = this.sortCiudades(this.props.ciudades, this.state.sortField);

    return (
      <table>
        <thead>
          <tr>
            {/* 点击姓名表头触发排序 */}
            <th onClick={() => this.sortCiudades(this.props.ciudades, '姓名')}>
              姓名
              {/* 显示当前排序方向提示 */}
              {this.state.sortField === 'name' && (
                <span style={{marginLeft: '4px'}}>{this.state.sortDirection === 'asc' ? '↑' : '↓'}</span>
              )}
            </th>
            {/* 其他表头同理 */}
            <th onClick={() => this.sortCiudades(this.props.ciudades, '城市')}>城市</th>
          </tr>
        </thead>
        <tbody>
          {sortedCiudades.map((item, index) => (
            <tr key={index}>
              <td>{item.name}</td>
              <td>{item.city}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

export default TableCiudades;

关键修改点说明 #

• 用state替代全局变量：把sortField（当前排序字段）和sortDirection（排序方向）放到组件state中，让React能追踪状态变化，触发重新渲染。
• 同一表头点击反转方向：在排序方法里判断，如果当前点击的字段和已排序字段一致，就反转方向；如果是新字段，就用默认的desc方向。
• 保证数据不可变性：用[...ciudades]复制原数组，避免直接修改props传入的数据源。
• 添加排序状态提示：在表头显示箭头标识当前排序方向，提升用户体验。

额外注意事项 #

• 请根据你的实际数据结构调整fieldMap的映射关系，确保表头文字和数据字段一一对应。
• 如果数据源来自父组件的props，可在componentDidUpdate中监听props变化，自动触发重新排序。

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