javascript - React js 中的数组重新排列

Question

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

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

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

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"
 },
]

如何实现这一目标？

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