React-Hooks:如何对数据进行升序和降序排序，并在可重用的数据表组件中显示

import React, { useState, useEffect } from 'react';

const DataTable = ({ data }) => {
  const [sortedData, setSortedData] = useState(data);
  const [sortOrder, setSortOrder] = useState("asc");

  useEffect(() => {
    // 根据排序方式对数据进行排序
    const sorted = [...data].sort((a, b) => {
      if (sortOrder === "asc") {
        return a - b;
      } else {
        return b - a;
      }
    });

    setSortedData(sorted);
  }, [data, sortOrder]);

  // 渲染数据表格
  return (
    <table>
      <thead>
        <tr>
          <th>数据</th>
        </tr>
      </thead>
      <tbody>
        {sortedData.map((item, index) => (
          <tr key={index}>
            <td>{item}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default DataTable;

import React from 'react';
import DataTable from './DataTable';

const App = () => {
  const data = [5, 2, 8, 1, 9];

  return (
    <div>
      <h1>数据表</h1>
      <DataTable data={data} />
    </div>
  );
};

export default App;