如何按价值对产品进行排序？

Question

我有对象数组 products 喜欢

[{name: 'apple', value: 100}, {name: 'watermelon', value: 200}, {name: 'orange', value: 50}]，以及带有“最高价”和“最低价”选项的 select 输入，但它不起作用：

function ProductsPage() {
    const [products, setProducts] = useState([])

    useEffect(() => {/*here i setProducts([...]) array of objects which i get of backend*/})

    const orderShowing = (e) => {
        let actual_show = products
        let newOrder = e.target.value;
        if (newOrder === "High price") {
            actual_show.sort((a, b) => (b.value > a.value) ? 1 : (a.value > b.value) ? -1 : 0)
        } else if (newOrder === "Low price") {
            actual_show.sort((a, b) => (a.value > b.value) ? 1 : (b.value > a.value) ? -1 : 0)
        console.log(actual_show)
        setProducts(actual_show)
    }

    return (
        <div>
            <select id="productsOrder" onChange={orderShowing}>
                <option>High price</option>
                <option>Low price</option>
            </select>
            <h2>Products</h2>
            {products.map((p) => {
                return <p>{p.name}</p>})}
        </div>
    )
}

console.log 实际上是我想要的（排序有效），但页面不会用 'new' products 数组

刷新

Answer 1

尝试这样的事情：

products.sort(function (a, b) {
  return a.value - b.value;
});

请记住，此解决方案仅适用于数值。

Answer 2

我运行你的代码。当你映射它时，你只是忘记了 p.name 上的花括号 - 否则它将被视为一个字符串。应该是 {p.name}.

Answer 3

首先，您需要复制一份 state:

  let actual_show = [...products];

然后尝试像我正在使用的那样对其进行排序：

import { useEffect, useState } from "react";

export default function App() {
  const [products, setProducts] = useState([
    { name: "apple", value: 100 },
    { name: "watermelon", value: 200 },
    { name: "orange", value: 50 }
  ]);

  const orderShowing = (e) => {
    let actual_show = [...products];
    let newOrder = e.target.value;
    if (newOrder === "High price") {
      actual_show.sort((a, b) => a.value - b.value);
    } else if (newOrder === "Low price") {
      actual_show.sort((a, b) => b.value - a.value);
    }
    setProducts(actual_show);
  };

  return (
    <div>
      <select id="productsOrder" onChange={orderShowing}>
        <option>High price</option>
        <option>Low price</option>
      </select>
      <h2>Products</h2>
      {products.map((p) => {
        return <p>{p.name}</p>;
      })}
    </div>
  );
}

Answer 4

这是对现有代码进行最少更改的工作示例。 Run the code here

export default function App() {
  const [products, setProducts] = useState([]);

  useEffect(() => {
    setProducts([
      { name: 'apple', value: 100 },
      { name: 'watermelon', value: 200 },
      { name: 'orange', value: 50 }
    ]);
  }, []);

  const orderShowing = e => {
    let actual_show = products.slice(); //making a copy of products
    let newOrder = e.target.value;
    if (newOrder === 'High price') {
      actual_show.sort((a, b) =>
        b.value > a.value ? 1 : a.value > b.value ? -1 : 0
      );
    } else if (newOrder === 'Low price') {
      actual_show.sort((a, b) =>
        a.value > b.value ? 1 : b.value > a.value ? -1 : 0
      );
    }
    console.log(actual_show);
    setProducts(actual_show);
  };
  return (
    <div>
      <select id="productsOrder" onChange={orderShowing}>
        <option>High price</option>
        <option>Low price</option>
      </select>
      <h2>Products</h2>
      {products.map(p => {
        return <p>{p.name}</p>;
      })}
    </div>
  );
}

如何按价值对产品进行排序？

How sort rendering of products by value?

javascript

sorting

reactjs

react-hooks

use-state