Javascript 在React中对对象数组进行排序并渲染它们

我有一个包含一些信息的对象数组。我无法按照我想要的顺序呈现它们，我需要一些帮助。我把它们渲染成这样：

this.state.data.map(
    (item, i) => <div key={i}> {item.matchID} {item.timeM} {item.description}</div>
)

this.state.data.map(
（item，i）=>{item.matchID}{item.timeM}{item.description}
)

---

是否可以使用

map（）

-函数中的

item.timeM

对它们进行升序排序，还是必须在使用map之前对它们进行排序

这可能就是您想要的：

// ... rest of code

// copy your state.data to a new array and sort it by itemM in ascending order
// and then map 
const myData = [].concat(this.state.data)
    .sort((a, b) => a.itemM > b.itemM ? 1 : -1)
    .map((item, i) => 
        <div key={i}> {item.matchID} {item.timeM}{item.description}</div>
    );

// render your data here...

/。。。代码的其余部分
//将state.data复制到新数组中，并按itemM升序对其排序
//然后是地图
const myData=[].concat（this.state.data）
.sort（（a，b）=>a.itemM>b.itemM？1:-1）
.map（（项目，i）=>
{item.matchID}{item.timeM}{item.description}
);
//在这里呈现您的数据。。。

---

方法

排序

。因此，我使用

concat

方法创建了一个新数组。字段

itemM

上的排序应适用于字符串和数字等可排序实体。

在映射对象之前，需要对对象进行排序。使用带有自定义比较器定义的

sort（）

函数（如

var obj = [...this.state.data];
obj.sort((a,b) => a.timeM - b.timeM);
obj.map((item, i) => (<div key={i}> {item.matchID}  
                      {item.timeM} {item.description}</div>))

var obj=[…this.state.data]；
对象排序（（a，b）=>a.timeM-b.timeM）；
obj.map（（item，i）=>（{item.matchID}
{item.timeM}{item.description}）

此.state.data.sort（（a，b）=>a.item.timeM>b.item.timeM）.map(
（item，i）=>{item.matchID}{item.timeM}{item.description}
)

试试lodash sortBy

import * as _ from "lodash";
_.sortBy(data.applications,"id").map(application => (
    console.log("application")
    )
)

---

阅读更多信息：

Chrome浏览器将整数值视为返回类型，而不是布尔值 所以

this.state.data.sort（（a，b）=>a.item.timeM>b.item.timeM？1:-1）.map(
（item，i）=>{item.matchID}{item.timeM}{item.description}
)

const list=[
{数量：10，尺寸：'XXL'}，
{数量：2，大小：'XL'}，
{数量：8，大小：'M'}
]
列表排序（（a，b）=>（a.数量>b.数量）？1:-1）
log（list）

这种方法对我很有效

const list = [
  { price: 10, plan: 'a' },
  { price: 2, plan: 'b' },
  { price: 8, plan: 'c' }
];
this.setState({ planList: list.sort((a,b)=> a.membership_plan_initial_price-b.membership_plan_initial_price)  });


render(){
   return(){
      <div>
          this.state.planList !== undefined && this.state.planList !== null && 
          this.state.planList !== '' && this.state.planList.map((ele, index) => {
              return (
                 <div key={index}> {ele.price}{ele.plan}</div>
              )
          })
      </div>
  }
}

const list=[
{价格：10，计划：'a'}，
{价格：2，方案：'b'}，
{价格：8，计划：'c'}
];
this.setState（{planList:list.sort（（a，b）=>a.membership\u plan\u initial\u price-b.membership\u plan\u initial\u price）}）；
render（）{
返回（）{
this.state.planList！==未定义&&this.state.planList！==空&&
this.state.planList！=''&&this.state.planList.map（（元素，索引）=>{
返回(
{ele.price}{ele.plan}
)
})
}
}

---

谢谢

在使用

map

方法之前，您必须对它们进行排序。@Oen44是正确的。但是要知道，逻辑和函数（map和sort）不是特定于React的，它们是正常的JS构造！我认为

.sort（（a，b）=>a.itemM>b.itemM）

在这里是不正确的（这真的让我很反感…）。它应该是

.sort（（a，b）=>a.itemM-b.itemM）

如果

itemM

是数字，对吗？如果

itemM

不是数字，它应该是这样的：

.sort（（a，b）=>a.item.timeM>b.item.timeM？1:-1）

this.state.data.sort((a, b) => a.objKey > b.objKey ? 1:-1).map((objKey, index)

const list = [
  { price: 10, plan: 'a' },
  { price: 2, plan: 'b' },
  { price: 8, plan: 'c' }
];
this.setState({ planList: list.sort((a,b)=> a.membership_plan_initial_price-b.membership_plan_initial_price)  });


render(){
   return(){
      <div>
          this.state.planList !== undefined && this.state.planList !== null && 
          this.state.planList !== '' && this.state.planList.map((ele, index) => {
              return (
                 <div key={index}> {ele.price}{ele.plan}</div>
              )
          })
      </div>
  }
}

this.state.data.sort((a, b) => a.objKey > b.objKey ? 1:-1).map((objKey, index)