React上的对象数组排序[关闭]答案

【问题标题】：Sort array of Object on React [closed]React上的对象数组排序[关闭]
【发布时间】：2021-09-24 11:15:57
【问题描述】：

我想添加一个过滤和排序选项，以便用户可以按价格范围和名称搜索产品，然后按价格对产品进行排序。

这是我的产品列表数组：

 export const products = [
 {
 name: "Watermelon",
 price: 3.5,
 description: "This is the juiciest red 
fruit on the planet.",
image: 
"https://source.unsplash.com/300x300? 
 watermelon",
},
{
name: "Mango",
price: 2.5,
description: "This is the juiciest yellow 
fruit on the planet.",
image: 
"https://source.unsplash.com/300x300? 
mango",
},
{
name: "Grapes",
price: 5.0,
description: "This is the juiciest little 
green fruit on the planet.",
image: 
"https://source.unsplash.com/300x300? 
grapes",
},

];

【问题讨论】：

查看 Lodash。 lodash.com/docs/4.17.15#sortBy

标签： reactjs next.js

【解决方案1】：

对于搜索，您可以使用数组过滤器... 像这样的

let searchText = "";
let resultSearch = products.filter(item => item.name.includes(searchText) || item.price.includes(searchText));

对于排序，可以使用数组排序

let resultSort = products.sort((a, b) => {
    return a.price - b.price;
});

【讨论】：

成功了，谢谢
okeee....欢迎您

【解决方案2】：

你在看这个

const products = [{
 name: "Watermelon",
 price: 3.5,
 description: "This is the juiciest red fruit on the planet.",
image: "https://source.unsplash.com/300x300? watermelon",
},
{
name: "Mango",
price: 2.5,
description: "This is the juiciest yellow fruit on the planet.",
image: "https://source.unsplash.com/300x300? mango",
},
{
name: "Grapes",
price: 5.0,
description: "This is the juiciest little green fruit on the planet.",
image:  "https://source.unsplash.com/300x300? grapes",
},
];

let result = products.sort((a,b) => a.price - b.price);
console.log(result);

【讨论】：

是的，按价格排序，谢谢

【解决方案3】：

const filterItems = (products, price) =>{
      return product.filter(item=>item.price===price)}

const sortItems = (product, propKey="price" ) =>{
  return product.sort((itemA,itemB)=>itemA[propKey] - itemB[propKey] );}

【讨论】：

希望对您有所帮助。不客气。

【解决方案4】：

可能是这样的：

import React from "react";

export default function App() {
  const [state] = React.useState(products);
  const [price, setPrice] = React.useState("");
  const [name, setName] = React.useState("");

  const filterFunc = (item) => {
    return (
      String(item.price).includes(price) &&
      item.name.toLowerCase().includes(name.toLowerCase())
    );
  };

  const renderProducts = () => {
    return state
      .slice()
      .filter(filterFunc)
      .sort((a, b) => a.price - b.price)
      .map(({ name, price, description }) => {
        return (
          <div key={name} style={{ border: "1px solid black", margin: "1rem" }}>
            <div>Name: {name}</div>
            <div>Price: {price}</div>
            <div>Description: {description}</div>
          </div>
        );
      });
  };

  return (
    <div className="App">
      <div>
        <label>Price:</label>
        <input
          type="number"
          value={price}
          onChange={(e) => setPrice(e.target.value)}
        />
      </div>
      <div>
        <label>Name:</label>
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </div>
      {renderProducts()}
    </div>
  );
}

const products = [
  {
    name: "Banana",
    price: 9,
    description: "This is the juiciest red fruit on the planet.",
    image: "https://source.unsplash.com/300x300?banana",
  },
  {
    name: "Watermelon",
    price: 3.5,
    description: "This is the juiciest red fruit on the planet.",
    image: "https://source.unsplash.com/300x300?watermelon",
  },
  {
    name: "Mango",
    price: 2.5,
    description: "This is the juiciest yellow fruit on the planet.",
    image: "https://source.unsplash.com/300x300?mango",
  },
  {
    name: "Grapes",
    price: 5.0,
    description: "This is the juiciest little green fruit on the planet.",
    image: "https://source.unsplash.com/300x300?grapes",
  },
];

【讨论】：