Javascript 在数组上映射时，如何始终以相同的顺序显示项？

我已经创建了一个购物车，可以向其中添加或删除项目。在我的应用程序中的某个点，我正在显示这个购物车，它最多有3个项目。但是，随着我从购物车中添加/删除物品，物品的顺序会发生变化

{cartItems.map( item => <p key={`${item.type}-${item.id}`}>{item.name || item.time}</p>)}

如何始终在“服务”之前显示“时间”类型的对象？

const数组=[{
“id”：“0”，
“类型”：“服务”，
“名称”：“绘画”，
“isFavorite”：false
},
{
“id”：“1”，
“类型”：“时间”，
“日”：“今天”，
“时间”：“09:40”，
“isFavorite”：false
}, {
“id”：“2”，
“类型”：“时间”，
“天”：“昨天”，
“时间”：“09:30”，
“isFavorite”：false
}, {
“id”：“3”，
“类型”：“服务”，
“名称”：“某些服务”，
“isFavorite”：false
}
];
const sortedArray=数组。reduce（（acc，object）=>{
const method='time'在对象'unshift'：'push'中；
acc[方法]（对象）；
返回acc；
}, []);
控制台日志（Darray）您可以编写一个简单的比较函数，然后在数组排序中使用该函数

function compare(a, b) {
  if (a.type === b.type) return 0;
  else if (a.type === 'time') return -1;

  return 1;
}

var cartItems = [{
    "id": "0",
    "type": "service",
    "name": "Painting",
    "isFavorite": false
}, {
    "id": "0",
    "type": "time",
    "day": "today",
    "time": "09:40",
    "isFavorite": false
}]

cartItems.sort(compare);

然后你可以像以前一样简单地在手机上调用你的地图

{cartItems.map( item => <p key={`${item.type}-${item.id}`}>{item.name || item.time}</p>)}

{cartimes.map（item=>
{item.name | | item.time}
）
cartItems

是否是组件状态的一部分？它从何而来？理想的解决方案是在每次添加或删除时对

cartItems

进行排序，这样它就有序了，您就不必担心了。另一种方法（但不是很好）是在

渲染功能中进行排序。另一种解决方案是使用
数组。排序（（a，b）=>（a.type==“time”？-1:1））;我无法更改IDunfortunately@kiabbott上面的代码段可以在相同的ID下正常工作。@UmairSarfraz我无法理解这个位
acc[method]（对象）想解释一下吗？@theblackgigant我不明白为什么我会返回-1或1。是否需要解释？是否需要解释“返回0”和“返回-1”在此函数中的作用？或者给我指一些参考资料以便我能理解它？@kiabbott当然``函数比较（a，b）{如果（a按某种排序标准小于b）{return-1；}如果（按排序标准a大于b）{return 1；}//a必须等于b return 0；}``但是更好。。。我努力将这一层次提高到更高的层次。。。如果我有另一种类型，比如“business”，我希望它始终位于数组的末尾，该怎么办。我该如何实现它呢？这是一个标准问题，即对具有三个不同值的数组进行排序，如{0，1和2}s。这被回答了多次，比如这里
{cartItems.map( item => <p key={`${item.type}-${item.id}`}>{item.name || item.time}</p>)}