React js中的数组重新排列答案

【问题标题】：Array Re arrange in React jsReact js中的数组重新排列
【发布时间】：2021-05-20 01:48:21
【问题描述】：

我有一些要列出的数组对象。

基于列表，如果用户从对象中单击特定的列表项，

需要首先显示特定的点击列表项。

var list = [
 {
  tradeareaid: "80"
  tradeareaname: "test1"
 },
 { 
  tradeareaid: "81"
  tradeareaname: "test2"
 },
 { 
  tradeareaid: "82"
  tradeareaname: "test3"
 },
 { 
  tradeareaid: "83"
  tradeareaname: "test4"
 },
 { 
  tradeareaid: "84"
  tradeareaname: "test5"
 },
]

在列表中如果我选择贸易区 83 表示我需要如下列表

var list = [
 { 
  tradeareaid: "83"
  tradeareaname: "test4"
 },
 {
  tradeareaid: "80"
  tradeareaname: "test1"
 },
 { 
  tradeareaid: "81"
  tradeareaname: "test2"
 },
 { 
  tradeareaid: "82"
  tradeareaname: "test3"
 },
 { 
  tradeareaid: "84"
  tradeareaname: "test5"
 },
]

如何做到这一点？

【问题讨论】：

标签： javascript arrays reactjs sorting

【解决方案1】：

您可以获取被单击项目的tradeareaid 并使用getSortedList 函数（在单击事件处理程序中）获取新列表，如下所示：

var list = [
 {
  tradeareaid: "80",
  tradeareaname: "test1"
 },
 { 
  tradeareaid: "81",
  tradeareaname: "test2"
 },
 { 
  tradeareaid: "82",
  tradeareaname: "test3"
 },
 { 
  tradeareaid: "83",
  tradeareaname: "test4"
 },
 { 
  tradeareaid: "84",
  tradeareaname: "test5"
 },
]

function getSortedList(id){
  const clickedItem = list.find(item=>item.tradeareaid===id)
  const filterdList = list.filter(item=>item.tradeareaid!==id)
  return [clickedItem,...filterdList]
}
const sortedList = getSortedList(list[3].tradeareaid)
console.log({sortedList})

【讨论】：

【解决方案2】：

您需要为点击排序设置一些键

var list = [ { tradeareaid: "80", tradeareaname: "test1" }, { tradeareaid: "81", tradeareaname: "test2" }, { tradeareaid: "82", tradeareaname: "test3" }, { tradeareaid: "83", tradeareaname: "test4" }, { tradeareaid: "84", tradeareaname: "test5" }, ]

//if test4 was clicked 

clicked = 3; // index
list.forEach((a, b) => {
  list[b]['key'] = b;
  if (b == clicked) {
    list[b]['key'] = -1;
  }
})

console.log(list.sort((a, b) => a.key - b.key))

【讨论】：