Question

import React, {
  useState,
  Fragment,
  useEffect,
  useContext,
  useRef,
} from "react";
import { CgSortAz } from "react-icons/cg";  
import {
  Menu,
  MenuItem,
  MenuButton,
  SubMenu
} from '@szhsin/react-menu';
import '@szhsin/react-menu/dist/index.css';



const sortByPrice = () => {
let sortedProducts = _cloneArray(currentProducts);
 if (sortedProducts === "lowest") {
   sortedProducts = _sortArray(currentProducts, "Location Price");
 } else if (sortedProducts === "highest") {
   sortedProducts = _sortArray(currentProducts, "Location Price", sortedProducts === "lowest" ? "" : 
 "desc");
 }
   setCurrentProducts(sortedProducts)
   console.log(sortedProducts, 'see something')
}

return (
 <div className="store__page__sort">
  <div className="store__page__sort__header">
   <Menu menuButton={<MenuButton><CgSortAz /></MenuButton>}>
    <MenuItem>Lowest to Highest</MenuItem>
    <MenuItem>Highest to Lowest</MenuItem>
   </Menu>
  </div>
 </div>
)

export default Store;

用户应该能够看到商店上的排序图标，以便他可以对商店中的商品进行排序。

用户应该看到从最低到最高价格的排序，以便他可以将商店中的商品从最低到最贵的商品重新排列。

用户应该看到按价格从高到低的排序，以便他可以将商店中的商品从最贵到最便宜重新排列。

用户应该能够通过点击相同的排序图标来删除排序。

Answer 1

const productList=[
  { price: 30, property: "property" },
    { price: 10, property: "property" },
    { price: 40, property: "property" },
    { price: 5, property: "property" },
];
productList.sort((a,b)=> a.price - b.price );
console.log(productList);

结果是

[
{price: 5, property: "property"}
{price: 10, property: "property"}
{price: 30, property: "property"}
{price: 40, property: "property"}
]

用户应该能够按商品价格对商店中的商品进行排序。升序和降序

1 个答案: