ReactJS HTML表格列排序异常：仅第一列可排序，求修复方案

我看了你的代码，问题主要出在状态管理逻辑、数据属性访问路径以及数组排序的原地修改上，下面一步步帮你解决：

问题分析 #

1. 状态键未初始化：你用列的id作为状态的键（比如overall_score），但初始state里只有users，第一次点击非第一列时，prev[id]是undefined，导致排序逻辑混乱。
2. 数据访问路径错误：你的用户数据结构是user.span[columnId].value，但排序时直接用a[id]，根本取不到对应的值，自然无法正确排序。
3. 原地修改数组：Array.sort()会直接修改原数组，这会破坏React状态的不可变性，可能导致意外的渲染问题。

修复方案 #

1. 调整状态结构 #

把排序相关的状态统一管理，用sortedColumn记录当前排序的列，sortDirection记录升序/降序（asc或desc），这样逻辑更清晰，也避免了多列状态键的混乱。

2. 修正数据访问路径 #

排序时要正确获取user.span[id].value的值，你的数据都是数字类型，直接做数值比较即可。

3. 避免原地修改数组 #

排序前先复制一份用户数组（比如用[...prev.users]），再对复制后的数组排序，保证原状态数组不被直接修改。

完整修正代码 #

import React from "react";

class Th extends React.Component {
  handleClick = () => {
    const { onClick, id } = this.props;
    onClick(id);
  };

  render() {
    const { value, currentSortedColumn, sortDirection } = this.props;
    // 添加排序方向指示器，提升用户体验
    const sortIndicator = currentSortedColumn === id 
      ? sortDirection === 'asc' ? ' ↑' : ' ↓' 
      : '';

    return <th onClick={this.handleClick}>{value}{sortIndicator}</th>;
  }
}

class App extends React.Component {
  state = { 
    users: [],
    sortedColumn: null, // 当前排序的列id
    sortDirection: 'asc' // 默认升序
  };

  async componentDidMount() {
    const res = await fetch(
      `https://run.mocky.io/v3/6982a190-6166-402e-905f-139aef40e6ef`
    );
    const users = await res.json();
    this.setState({ users });
  }

  handleSort = (id) => {
    this.setState(prev => {
      // 判断是否是当前排序的列，是则切换方向，否则默认升序
      const newDirection = prev.sortedColumn === id 
        ? prev.sortDirection === 'asc' ? 'desc' : 'asc' 
        : 'asc';

      // 复制数组避免原地修改原状态
      const sortedUsers = [...prev.users].sort((a, b) => {
        const valueA = a.span[id].value;
        const valueB = b.span[id].value;
        
        if (newDirection === 'asc') {
          return valueA - valueB;
        } else {
          return valueB - valueA;
        }
      });

      return {
        sortedColumn: id,
        sortDirection: newDirection,
        users: sortedUsers
      };
    });
  };

  render() {
    const { users, sortedColumn, sortDirection } = this.state;
    return (
      <table border="1" cellPadding="8">
        <thead>
          <tr>
            <Th 
              onClick={this.handleSort} 
              id="mileage" 
              value="Mileage"
              currentSortedColumn={sortedColumn}
              sortDirection={sortDirection}
            />
            <Th 
              onClick={this.handleSort} 
              id="overall_score" 
              value="Overall score"
              currentSortedColumn={sortedColumn}
              sortDirection={sortDirection}
            />
            <Th 
              onClick={this.handleSort} 
              id="fuel_consumed" 
              value="Fuel Consumed"
              currentSortedColumn={sortedColumn}
              sortDirection={sortDirection}
            />
          </tr>
        </thead>
        <tbody>
          {users.map((user, index) => (
            <tr key={index}>
              <td>{user.span.mileage.value}</td>
              <td>{user.span.overall_score.value}</td>
              <td>{user.span.fuel_consumed.value}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

export default App;

额外优化点 #

• 给表格添加了border和cellPadding，让样式更清晰易读
• 表头添加了排序方向指示器（↑/↓），用户能直观看到当前排序状态
• 给列表项添加了key属性，符合React列表渲染的规范

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