如何使用Javascript / React中的props对使用map方法的数组进行排序

如何解决如何使用Javascript / React中的props对使用map方法的数组进行排序

我有一个名为products的数组，该数组使用map方法列出其中的所有元素，并且我正在尝试按价格道具对这些元素进行排序。我已经尝试了所有类型的排序方法和函数，但无法正常工作。

JS

const recentprods = products.map(prod => {
  return <TableRow name={prod.name} price={prod.price} />
})

我尝试过：

const recentprods = products.map(prod => {
  return <TableRow name={prod.name} price={prod.price} />
}).sort((a,b) => a.price < b.price)

和

recentprods.sort() 

从本质上讲，如何通过道具对反应成分进行分类？

解决方法

您应在映射之前应用排序。

const recentprods = products
  .sort((a,b) => a.price - b.price)
      // if you want to change the sorting direction: b.price - a.price
  .map(prod => {
     return <TableRow name={prod.name} price={prod.price} />
  });

,

您想对数据进行归一化，排序和其他修改，然后将其应用于React组件。在以下情况下，products数组将保存每个具有price属性的对象，因此请先对products数组进行排序，然后 then 在项目上进行映射。>

.sort方法对数组中的元素进行排序并返回排序后的数组。链接的.map方法将按照规定的顺序遍历排序后的数组。

我认为以下是有效的解决方案。请注意，价格被视​​为number。如果不是，则排序可能无法正确进行。

const recentprods = products
  .sort((a,b) => a.price - b.price)
  .map(item => <TableRow name={item.name} price={item.price} />);

,

所以，是的，基本上您需要先对其进行排序然后再进行映射，我为您构建了一个示例：

constructor(props) {
    super(props);

    this.state = {
      products: [
        { name: 'Product 2',price: 2 },{ name: 'Product 6',price: 6 },{ name: 'Product 1',price: 1 },{ name: 'Product 3',price: 3 },{ name: 'Product 7',price: 7 },{ name: 'Product 4',price: 4 },{ name: 'Product 8',price: 8 },{ name: 'Product 5',price: 5 },],};
  }

  render() {
    return (
      <div>
        <h1>ONLY MAPPED</h1>
        {this.state.products.map((prod,i) => {
          return (
            <li key={i}>
              {prod.name} and its price: {prod.price}
            </li>
          );
        })}

        <h1>BOTH SORTED AND MAPPED.</h1>
        {this.state.products
          .sort((first,second) => {
            return first.price > second.price ? 1 : -1;
          })
          .map((prod,i) => {
            return (
              <li key={i}>
                {prod.name} and its price: {prod.price}
              </li>
            );
          })}
      </div>
    );
  }

Here you can check out the output

,

考虑我们有一个带有名称和价格属性的对象数组。

const Products = [

{name:"p1",price: 5},{name:"p2",price: 3},{name:"p3",price: 2},{name:"p4",price: 7},

]

我们需要使用其价格属性按升序对Products数组进行排序。

console.log(Products.sort((a,b) =>  a.price-b.price )); // descending b.price-a.price

output - >

[
  {name: "p3",{name: "p2",{name: "p1",{name: "p4",price: 7}
]

现在，您可以使用要添加的jsx元素调用地图函数

Products.sort((a,b) =>  a.price-b.price ).map(data => {
   return <TableRow name={prod.name} price={prod.price} />;
});

PS：您可以直接在代码中使用此功能，也可以通过使用辅助功能来确保其排序的jsx。