在React JS中重新排列数组

debugcn 发表于 Dev

拉贾·高宝M

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

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

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

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

如何实现呢？

赫曼特·帕萨尔（Hemant Parashar）

您可以获取tradeareaid被单击项的，然后使用该getSortedList函数（在click事件处理程序中）获取类似以下内容的新列表：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。