React表格实现点击图标对Product列排序的方法求助

步骤1：添加排序状态 #

在App.jsx中导入useState，并添加状态跟踪排序字段与方向：

import { useState } from 'react';

function App() {
  // 原有代码保留
  const [sortConfig, setSortConfig] = useState({ key: 'product', direction: 'asc' });
  // 原有代码保留
}

步骤2：编写数据排序逻辑 #

基于当前排序状态，对产品数组进行排序处理：

// 放在products数组定义之后
const sortedProducts = [...products].sort((a, b) => {
  if (a.product < b.product) {
    return sortConfig.direction === 'asc' ? -1 : 1;
  }
  if (a.product > b.product) {
    return sortConfig.direction === 'asc' ? 1 : -1;
  }
  return 0;
});

步骤3：修改点击事件处理函数 #

替换原有的handleSort函数，实现排序方向切换：

const handleSort = () => {
  setSortConfig(prev => ({
    key: 'product',
    direction: prev.direction === 'asc' ? 'desc' : 'asc'
  }));
};

步骤4：使用排序后的数组渲染表格 #

将渲染表格时的数据源从products替换为sortedProducts：

<tbody>
  {sortedProducts.map((product) => (
    <tr key={product.id}>
      <td>{product.product}</td>
      <td>{product.quantity}</td>
      <td>{product.price}</td>
    </tr>
  ))}
</tbody>

完成以上修改后，点击Product列的红色图标，表格就会按照Product字段的升序/降序切换排序。

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