React表格排序报错：实现库存表格按数量升降序排序遇问题

Hey there! Let's get that in-stock product table sorted by inventory quantity (asc/desc) working for you. Here's a step-by-step approach that fits typical React patterns and should resolve your issue:

1. Add Sort State to Your Component #

First, we need to track the current sort target (we'll use stockQuantity here) and the sort direction (asc for ascending, desc for descending). Use React's useState hook to manage this state:

import { useState, useMemo } from 'react';

function ProductTables() {
  // Assume inStockProducts is your array of in-stock items with size and stockQuantity fields
  const [inStockProducts, setInStockProducts] = useState([/* your product data */]);
  // Track active sort configuration
  const [sortConfig, setSortConfig] = useState({ key: 'stockQuantity', direction: 'asc' });

  // Rest of your component code...
}

2. Create a Memoized Sorted Array #

We'll use useMemo to avoid re-sorting the array on every render (this optimizes performance, especially with large datasets). The sort logic compares inventory quantities and respects the current direction:

const sortedInStockItems = useMemo(() => {
  // Make a copy of the original array to avoid mutating state directly
  let sortedItems = [...inStockProducts];

  if (sortConfig.key) {
    sortedItems.sort((a, b) => {
      // Handle cases where stockQuantity might be stored as a string (e.g., from API)
      const aQuantity = typeof a.stockQuantity === 'string' ? Number(a.stockQuantity) : a.stockQuantity;
      const bQuantity = typeof b.stockQuantity === 'string' ? Number(b.stockQuantity) : b.stockQuantity;

      if (aQuantity < bQuantity) {
        return sortConfig.direction === 'asc' ? -1 : 1;
      }
      if (aQuantity > bQuantity) {
        return sortConfig.direction === 'asc' ? 1 : -1;
      }
      // Keep original order if quantities are equal
      return 0;
    });
  }

  return sortedItems;
}, [inStockProducts, sortConfig]); // Re-run only when data or sort config changes

3. Add a Clickable Header to Toggle Sort Direction #

Make the "Inventory Quantity" column header interactive to switch between ascending and descending sort. Add a handler function and update the header JSX:

const handleSortToggle = (key) => {
  let newDirection = 'asc';
  // Reverse direction if we're already sorting by this key
  if (sortConfig.key === key && sortConfig.direction === 'asc') {
    newDirection = 'desc';
  }
  setSortConfig({ key, direction: newDirection });
};

// In your table header JSX:
<th onClick={() => handleSortToggle('stockQuantity')}>
  库存数量
  {/* Add a visual indicator for current sort direction */}
  {sortConfig.key === 'stockQuantity' && (
    <span style={{ marginLeft: '4px' }}>
      {sortConfig.direction === 'asc' ? '↑' : '↓'}
    </span>
  )}
</th>

4. Render the Sorted Items #

Finally, replace your original in-stock products array with the sorted version when rendering table rows:

<tbody>
  {sortedInStockItems.map((product) => (
    <tr key={product.id}>
      <td>{product.size}</td>
      <td>{product.stockQuantity}</td>
      {/* Other product details */}
    </tr>
  ))}
</tbody>

Common Pitfalls to Avoid #

• State Mutation: Always create a copy of your products array before sorting (using [...inStockProducts]) to avoid directly modifying React state.
• String vs. Number Quantities: If stockQuantity is stored as a string (e.g., from API responses), convert it to a number before comparing to prevent incorrect lexicographical sorting (like "10" coming before "2").
• Unnecessary Re-renders: Using useMemo ensures we only re-sort when the product data or sort configuration changes, which is critical for larger datasets.

That should get your sorting functionality up and running smoothly! If you hit any specific snags with your existing code, feel free to share snippets and we can troubleshoot further.

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