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

Question

我有一个名为 products 的数组，它使用 map 方法列出其中的所有元素，我试图通过 price 属性对这些元素进行排序。我已经尝试了所有类型的排序方法和函数，但我无法让它工作。

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() 

从本质上讲，如何根据 props 对 React 组件进行排序？

Answer 1

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

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} />
  });