如何更改 React JS 中特定对象的顺序

Question

我有来自 API 的按钮。

This is my buttons array output.

0: {uploaded: "User", id: 1, status: "A1"}
1: {uploaded: "User", id: 2, status: "A2"}
2: {uploaded: "User", id: 3, status: "A3"}
3: {uploaded: "User", id: 4, status: "A4"}
4: {uploaded: "User", id: 5, status: "A5"}
5: {uploaded: "User", id: 6, status: "A6"}



this is how I am mapping..

{buttons?.map((item) => (
    <Button
        outline
        key={item.id}
        disabled={isDisabled(item, status)}
        onClick={onTap.bind(null, item)}
        className={`statusName`}
    >
        {item.status}
    </Button>
))}

现在我有一个要求，当名为 status: "A6" 的状态在 API 响应中可用时，我需要将按钮的顺序显示为 A1 A6 A2 A3 A4 A5 当 状态：“A6” 在 API 响应中不可用我需要显示按钮的顺序，因为 A1 A2 A3 A4 A5 不可用。我如何根据 status: "A6" value.

更改顺序排序

Answer 1

有几种方法可以解决这个问题。 "A6" 仍然出现在 "A1" 之后是否有特殊原因？

我的方法是这样的：

Array.prototype.move = function(from, to) {
    this.splice(to, 0, this.splice(from, 1)[0]);
};

var buttonArray = [
  {uploaded: "User", id: 1, status: "A1"},
  {uploaded: "User", id: 2, status: "A2"},
  {uploaded: "User", id: 3, status: "A3"},
  {uploaded: "User", id: 4, status: "A4"},
  {uploaded: "User", id: 5, status: "A5"},
  {uploaded: "User", id: 6, status: "A6"}
]

var a6Index = buttonArray .findIndex(item => item.status === "A6")

// Since Arrays are zero-indexed, move to 1
buttonArray.move(a6Index, 1)
// [
//   {uploaded: "User", id: 1, status: "A1"},
//   {uploaded: "User", id: 6, status: "A6"},
//   {uploaded: "User", id: 2, status: "A2"},
//   {uploaded: "User", id: 3, status: "A3"},
//   {uploaded: "User", id: 4, status: "A4"},
//   {uploaded: "User", id: 5, status: "A5"}
// ]

此方法的好处在于，如果 "A6" 不在您的数组中，数组顺序将保持不变。

然后您可以照常映射数组。

Answer 2

您可以检查是否存在 A6 并基于此使用 splice 方法构造新数组

export default function App() {
  let data = [
    { uploaded: "User", id: 1, status: "A1" },
    { uploaded: "User", id: 2, status: "A2" },
    { uploaded: "User", id: 3, status: "A3" },
    { uploaded: "User", id: 4, status: "A4" },
    { uploaded: "User", id: 5, status: "A5" },
    { uploaded: "User", id: 6, status: "A6" }
  ];

  let a6Idx = data.findIndex((obj) => obj.status === "A6");
  let newData = JSON.parse(JSON.stringify(data));
  if (a6Idx >= 0) {
    newData.splice(a6Idx);
    newData.splice(1, 0, data[a6Idx]);
  }

  return (
    <div>
      {newData.map((obj, idx) => (
        <button key={obj.id}>{obj.status}</button>
      ))}
    </div>
  );
}

sandbox

如何更改 React JS 中特定对象的顺序

How to change order of the specific object in react JS

arrays

sorting

reactjs

react-functional-component