React表格排序异常：仅单列生效，需实现表头点击字母排序

Let's figure out why only the "priority" header triggers proper sorting—this is almost always related to how you're tracking the active sort key or passing that state through your components. Let's break down the most likely issues and fix them:

First, Diagnose the Core Problem #

From what you described, clicking the first/third headers isn't updating the sort key your orderBy function uses. That means either:

1. The sort key isn't being set correctly when those headers are clicked, or
2. The sort key isn't being passed properly to the component where orderBy runs.

Step 1: Verify Your Sort State Management #

Make sure you're tracking the active sort key and direction in a parent component that has access to both the table data and the header click handlers. Here's a standard pattern to follow:

import { useState } from 'react';
import orderBy from 'lodash/orderBy';

// Parent component that holds state and handles sorting
function TodoList() {
  const [todos, setTodos] = useState(yourInitialTodoData);
  // Track active sort config: key = field to sort by, direction = asc/desc
  const [sortConfig, setSortConfig] = useState({ key: 'priority', direction: 'asc' });

  const handleSort = (clickedKey) => {
    let newDirection = 'asc';
    // Toggle direction if clicking the same key again
    if (sortConfig.key === clickedKey && sortConfig.direction === 'asc') {
      newDirection = 'desc';
    }
    // Update the sort config with the new key/direction
    setSortConfig({ key: clickedKey, direction: newDirection });
  };

  // Use lodash orderBy with the current sort config
  const sortedTodos = orderBy(todos, [sortConfig.key], [sortConfig.direction]);

  return (
    <Table 
      todos={sortedTodos} 
      onSort={handleSort} 
      currentSortKey={sortConfig.key}
    />
  );
}

Step 2: Check Header Click Handlers #

In your Table component, make sure each header is passing the correct field name to onSort—this field name must exactly match the property name in your data objects (case-sensitive!). For example:

function Table({ todos, onSort, currentSortKey }) {
  return (
    <table>
      <thead>
        <tr>
          <!-- Make sure 'title' matches the property in your todo objects -->
          <th onClick={() => onSort('title')}>
            Title
            {currentSortKey === 'title' && ' ↓'} {/* Optional visual indicator */}
          </th>
          <th onClick={() => onSort('priority')}>
            Priority
            {currentSortKey === 'priority' && ' ↓'}
          </th>
          <!-- Make sure 'dueDate' matches your data property -->
          <th onClick={() => onSort('dueDate')}>
            Due Date
            {currentSortKey === 'dueDate' && ' ↓'}
          </th>
        </tr>
      </thead>
      <tbody>
        {todos.map(todo => (
          <tr key={todo.id}>
            <td>{todo.title}</td>
            <td>{todo.priority}</td>
            <td>{todo.dueDate}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

Common Mistakes to Fix #

• Mismatched field names: If your data uses taskName instead of title, clicking the "Title" header with onSort('title') will make orderBy sort on a non-existent field—so it falls back to the original order.
• Stale sort state: If you're not updating sortConfig correctly (e.g., forgetting to set the new key in setSortConfig), the sort key will stay stuck on priority no matter which header you click.
• Nested properties: If you're sorting on a nested field like user.name, pass a function to orderBy instead of a string:

  const sortedTodos = orderBy(todos, [item => item.user.name], [sortConfig.direction]);
  

Quick Debugging Trick #

Add a console.log(sortConfig) inside your parent component's render function. When you click each header, check if the key updates to match the header's field. If it stays on priority for the first/third headers, your handleSort function or header click handlers are the culprit.

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