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

我有一个名为products的数组，它使用map方法列出其中的所有元素，并且我尝试按price prop对这些元素进行排序。我尝试了所有类型的排序方法和函数，但都无法使其正常工作

JS

---

本质上，如何通过道具对react组件进行排序？

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

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

---

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

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

---

在将数据应用于组件之前，您需要对其进行规范化、排序，并根据需要对其进行修改。在下面的示例中，products数组保存每个具有price属性的单独对象，因此请事先对products数组进行排序，然后映射到项目上

.sort方法对数组中的元素进行适当排序，并返回排序后的数组。chained.map方法将按照指定的顺序在排序的数组上迭代

我相信以下是一个有效的解决方案。请注意，价格被视为一个数字。如果不是，排序可能无法正常工作

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

---

在将数据应用于组件之前，您需要对其进行规范化、排序，并根据需要对其进行修改。在下面的示例中，products数组保存每个具有price属性的单独对象，因此请事先对products数组进行排序，然后映射到项目上

.sort方法对数组中的元素进行适当排序，并返回排序后的数组。chained.map方法将按照指定的顺序在排序的数组上迭代

我相信以下是一个有效的解决方案。请注意，价格被视为一个数字。如果不是，排序可能无法正常工作

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

---

所以，是的，基本上你需要先对它排序，然后映射它，我为你建立了一个示例：

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

---

假设我们有一个具有名称和价格属性的对象数组

常数乘积=[

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

]

我们需要使用Products数组的price属性按升序对其排序

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

---

PS：您可以在代码中直接使用此函数，也可以使用帮助函数，这样您可以确保其jsx已排序。

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

常数乘积=[

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

]

我们需要使用Products数组的price属性按升序对其排序

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

---

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

如果我在map之前或之后应用排序，我无法访问prod.price、prod.name等。那么我该怎么做？我应该在排序方法上再进行一次映射吗？@Uriel为什么您无法访问price和name？它们在映射功能范围内可用。复制并粘贴我的代码。@Uriel刚刚更新了我的答案，可能是gt>符号引起的。减号操作应该对其进行排序。排序方法必须返回一个数字，而不是我的答案中所示的布尔值：DIf如果我在map之前或之后应用排序，我无法访问prod.price、prod.name等。那么我该怎么做？我应该通过排序方法执行另一个map吗？@Uriel为什么不能访问price和name？它们在映射功能范围内可用。复制并粘贴我的代码。@Uriel刚刚更新了我的答案，可能是gt>符号引起的。减号操作应该对其进行排序。排序方法必须返回一个数字，而不是我的答案中所示的布尔值：D

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