React查询：如何排序数据

我的主要组件

在这里，我从后端获取数据并很好地接收数据。这里是它的样子。

现在我想按照它们的财产对它们进行排序，如步骤1、步骤2。我正在使用React查询来获取数据，但我不知道如何对其进行排序。此外，我已经有了排序功能。但是，我不知道如何根据排序规则更改数据。

.

import React, { useEffect, useState } from "react";
import useFetchTable from "../../../../api/table/useFetchTable";

const TableList = () => {
  const { data: response, status, isLoading } = useFetchTable();
  // const [sortField, setSortField] = useState("");
  // const [order, setOrder] = useState("asc");

  // const handleSortingChange = (accessor) => {
  //   const sortOrder =
  //     accessor === sortField && order === "desc" ? "asc" : "desc";
  //   setSortField(accessor);
  //   setOrder(sortOrder);
  //   handleSorting(accessor, sortOrder);
  // };

  // const handleSorting = (sortField, sortOrder) => {
  //   if (sortField) {
  //     const sorted = [...data].sort((a, b) => {
  //       if (a[sortField] === null) return 1;
  //       if (b[sortField] === null) return -1;
  //       if (a[sortField] === null && b[sortField] === null) return 0;
  //       return (
  //         a[sortField].toString().localeCompare(b[sortField].toString(), "en", {
  //           numeric: true,
  //         }) * (sortOrder === "asc" ? 1 : -1)
  //       );
  //     });
  //     setData(sorted);
  //   }
  // };


  if (status === "error") {
    return "Error";
  }

  if (isLoading) {
    return "Loading...";
  }

  console.log(response);

  const Print = ({ children }) => {
    return (
      <span className="text-xs bg-blue-100 rounded-full px-2 py-0.5 ml-2">
        {children}%
      </span>
    );
  };

  return (
    <div>
      <table>
        <thead className="border-b-2">
          <tr>
            <th className="py-1">Product Name</th>
            <th>Purchases</th>
            <th>US</th>
            <th>Ch Step 1</th>
            <th>Ch Step 2</th>
            <th>CVR</th>
            <th> 1</th>
            <th>Upsell 2</th>
            <th>Upsell 3</th>
          </tr>
        </thead>
        <tbody>
          {response.data?.map((row, idx) => (
            <tr key={idx}>
              <td>{row.name}</td>
              <td>
                {row.purchases[0]} <Print>{row.purchases[1]}</Print>
              </td>
              <td>
                {row.unique_sessions} <Print>100</Print>
              </td>
              <td>
                {row.checkout_step_1[0]} <Print>{row.checkout_step_1[1]}</Print>
              </td>

              <td>
                {row.checkout_step_2[0]} <Print>{row.checkout_step_2[1]}</Print>
              </td>

              <td>
                <Print>{`${row["cvr_%"]}`}</Print>
              </td>
              <td>
                {row.upsell_1_takes[0]} <Print>{row.upsell_1_takes[1]}</Print>
              </td>

              <td>
                {row.upsell_2_takes[0]} <Print>{row.upsell_2_takes[1]}</Print>
              </td>

              <td>
                {row.upsell_3_takes[0]} <Print>{row.upsell_3_takes[1]}</Print>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
      TableList
      {/* {data?.map((el) => {
        el.title;
      })} */}
    </div>
  );
};

export default TableList;