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