价格过滤升序和降序 React js

Question

我尝试设置以升序或降序方式过滤我的产品的功能。

如果您查看我下面的代码以访问我尝试通过产品映射的每个产品的价格，然后删除美元符号并将其排序为升序，最后设置产品的新状态。

但现在我感到很困惑，因为在尝试设置产品的新状态时我有排序的数组但没有整个产品??

感谢您的帮助

const data = [
  {
    category: "Sporting Goods",
    price: ".99",
    stocked: true,
    name: "Football",
  },
  {
    category: "Sporting Goods",
    price: ".99",
    stocked: true,
    name: "Baseball",
  },
  {
    category: "Sporting Goods",
    price: ".99",
    stocked: false,
    name: "Basketball",
  },
  {
    category: "Electronics",
    price: ".99",
    stocked: true,
    name: "iPod Touch",
  },
  {
    category: "Electronics",
    price: "9.99",
    stocked: false,
    name: "iPhone 5",
  },
  { category: "Electronics", price: "9.99", stocked: true, name: "Nexus 7" },
];

export default data;

const App = () => {
  const [searchValue, setSearchValue] = useState("");
  const [productsInfo, setProductsInfo] = useState([]);

  const handleChange = (e) => {
    setSearchValue(e.target.value);
  };

  const selectedChangeFilter = (e) => {
    if (e.target.value === "sporting goods") {
      const sportingGoods = data.filter(
        (product) => product.category === "Sporting Goods"
      );
      setProductsInfo(sportingGoods);
    }
    if (e.target.value === "electronics") {
      const electronicsGoods = data.filter(
        (product) => product.category === "Electronics"
      );
      setProductsInfo(electronicsGoods);
    }
    if (e.target.value === "lowest price") {
      const lowestPriceGoods = data
        .map((product) => product.price.substr(1))
        .sort((a, b) => a - b);
      console.log(lowestPriceGoods);
      setProductsInfo(lowestPriceGoods);
    }
    if (e.target.value === "all") {
      setProductsInfo(data);
    }
  };

  const searchProducts = (products) => {
    if (searchValue.toLowerCase().trim() === "") {
      setProductsInfo(products);
    } else {
      const seekedItem = productsInfo.filter(
        (product) =>
          product.name.toLowerCase().trim().includes(searchValue) ||
          product.category.toLowerCase().trim().includes(searchValue)
      );
      setProductsInfo(seekedItem);
    }
  };

  return (
    <div>
      <SearchInput
        handleChange={handleChange}
        searchValue={searchValue}
        selectedChangeFilter={selectedChangeFilter}
      />
      <Products
        data={data}
        searchValue={searchValue}
        productsInfo={productsInfo}
        searchProducts={searchProducts}
      />
    </div>
  );
};

export default App;

Answer 1

您可以使用 string#localeCompare 根据数字对数组进行排序 numeric 属性。

const data = [ { category: "Sporting Goods", price: ".99", stocked: true, name: "Football", }, { category: "Sporting Goods", price: ".99", stocked: true, name: "Baseball", }, { category: "Sporting Goods", price: ".99", stocked: false, name: "Basketball",}, { category: "Electronics", price: ".99", stocked: true, name: "iPod Touch", }, { category: "Electronics", price: "9.99", stocked: false, name: "iPhone 5", }, { category: "Electronics", price: "9.99", stocked: true, name: "Nexus 7" }, ];

data.sort((a,b) => a.price.localeCompare(b.price, undefined, {numeric: true}));
console.log(data);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

试试这个改进后的代码

 const selectedChangeFilter = (e) => {
    const { value } = e.target
    if (value === "sporting goods") {
      const sportingGoods = data.filter(
        (product) => product.category === "Sporting Goods"
      );
      setProductsInfo(sportingGoods);
    }
    if (value === "electronics") {
      const electronicsGoods = data.filter(
        (product) => product.category === "Electronics"
      );
      setProductsInfo(electronicsGoods);
    }
    if (value === "lowest price") {
      const lowestPriceGoods = data.sort((el1,el2) => el1.price.localeCompare(el2.price, undefined, {numeric: true}));
      setProductsInfo([...lowestPriceGoods]);
    }
    if (value === "highest price") {
      const highestPriceGoods = data.sort((el1,el2) => el2.price.localeCompare(el1.price, undefined, {numeric: true}));
      setProductsInfo([...highestPriceGoods]);
    }
    if (value === "all") {
      setProductsInfo(data);
    }
  };

价格过滤升序和降序 React js

Price filtering ascending & descending React js

sorting

filtering

reactjs