Блог

Я попытался отсортировать свои данные с помощью метода lodash _.OrderBy в своем проекте react.

Проблема:

Я применил сортировку к своим данным, но когда я нажимаю на заголовок, состояние обновляется, что я проверил с помощью инструкции console.log (), но данные не сортируются. Это работает, когда я изменяю изменение своих страниц с помощью разбиения на страницы. Я проверил его 30-40 раз, но не смог найти ошибку. Пожалуйста, помогите мне исправить эту ошибку. Спасибо, вот мой код:

 import "bootstrap/dist/css/bootstrap.css";
import _ from "lodash";
import React, { useState, useEffect } from "react";
import { getCategories } from "../../services/fakeCategoryService";
import { paginate } from "../../utils/paginate";
import { Products } from "../../services/fakeProductService";
import ProductsTable from "./ProductsTable";
import ListGroups from "../common/ListGroups";
import Pagination from "../common/Pagination";

function HandleProducts(props) {
  const [products, setProducts] = useState(Products);
  const [categories, setCategories] = useState(getCategories);
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [currentCategory, setCurrentCategory] = useState({ id: "" });
  const [sortColumn, setSortColumn] = useState({ path: "label", order: "asc" });

  useEffect(() => {
    const newCategories = [{ id: "", name: "All Categories" }, ...categories];
    setCategories(newCategories);
  }, []);

  // Pagination
  const handlePageChange = (page) => {
    setCurrentPage(page);
  };

  // List Groups
  const handleItemChange = (item) => {
    setCurrentCategory(item);
    setCurrentPage(1);
  };
  // Sorting
  const handleSort = (sortColumn) => {
    setSortColumn(sortColumn);
  };

  const handleRemove = (item) => {
    setProducts(products.filter((product) => product.id !== item.id));
  };

  const filteredProducts =
    currentCategory.id === ""
      ? products
      : products.filter(
          (product) => product.category.id === currentCategory.id
        );

  const sorted = _.orderBy(
    filteredProducts,
    [sortColumn.path],
    [sortColumn.order]
  );
  const paginated = paginate(sorted, currentPage, pageSize);

  return (
    <div className="container row">
      <div className="col-3">
        <ListGroups
          items={categories}
          currentItem={currentCategory}
          onItemChange={handleItemChange}
        />
      </div>
      <div className="col">
        <ProductsTable
          products={paginated}
          onRemove={handleRemove}
          onSort={handleSort}
          sortColumn={sortColumn}
        />
        <Pagination
          currentPage={currentPage}
          pageSize={pageSize}
          totalItems={filteredProducts.length}
          onPageChange={handlePageChange}
        />
      </div>
    </div>
  );
}

export default HandleProducts;


 

 import React from "react";

function TableHeader({ columns, sortColumn, onSort }) {
  const raiseSort = (path) => {
    if (sortColumn.path === path) {
      sortColumn.order = sortColumn.order === "asc" ? "desc" : "asc";
    } else {
      sortColumn.path = path;
      sortColumn.order = "asc";
    }
    onSort(sortColumn);
  };

  //   const renderSortIcon = (column) => {
  //     if (column.path !== sortColumn.path) return null;
  //     if (sortColumn.order === "asc")
  //       return <FontAwesomeIcon icon={faSortDown} />;
  //     return <FontAwesomeIcon icon={faSortUp} />;
  //   };

  return (
    <thead>
      <tr>
        {columns.map((column) => {
          return (
            <th
              style={{ cursor: "pointer" }}
              onClick={() => raiseSort(column.path)}
              key={column.path || column.key}
            >
              {column.label}
              {/* {renderSortIcon(column)} */}
            </th>
          );
        })}
      </tr>
    </thead>
  );
}

export default TableHeader;