如何按价值排序呈现产品？

Question

我有 products 之类的对象数组

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

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 实际上是我想要的（排序有效），但页面不会使用“新”products 数组刷新

Answer 1

首先你需要复制你的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 2

这是对现有代码进行最少更改的工作示例。 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>
  );
}

Answer 3

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

Answer 4

试试这样的：

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

请记住，此解决方案仅在数值为数字时才有效。