Question

我想按第一个Component排序对象，而不是按标识符排序。

我映射了一个对象JSON，并尝试使用shift()，push()，forEach()，但始终按标识符返回对象排序。对于我的代码：

listDices = [
{value: 1, hidden: false, id:0},
{value: 2, hidden: false, id:1},
{value: 6, hidden: false, id:2},
{value: 6, hidden: false, id:3},
{value: 5, hidden: false, id:4},
];

const arrMiniDices = [];
        listDices.map(item => {
            if (item.hidden) {
                arrMiniDices.push(
                        <BtnDice 
                            key={item.id}
                            value={item.value}
                            className="btn__dice--small"
                            onClick={() => this.handleHideDice(item.id)}
                        />
                )
            }
        });

我将arrMiniDices放在一个组件中：

<ViewSectionToolsResult
      arrMiniDices={arrMiniDices}
/>

例如，我有一个数组：

const arr = [
{id0: "a"},
{id1: "b"},
{id2: "c"},
{id3: "d"},
{id4: "e"}
];

所有项目都有onclick，当我单击“ d”，“ b”，“ c”，“ a”，“ e”时，我想要arrMiniDices =

[{id3: "d"},
{id1: "b"},
{id2: "c"},
{id0: "a"},
{id4: "e"}];

按点击顺序但是我总是

[{id0: "a"},
{id1: "b"},
{id2: "c"},
{id3: "d"}
{id4: "e"}];

Answer 1

您可以简单地尝试颠倒所有顺序

假设这是最终数组

console.log(result)
//[{id2: "c"},{id1: "b"}];

console.log(result.reverse())

//[{id1: "b"},{id2: "c"}];

array.push会默认默认弹出lastin

Answer 2

您可以保留另一个数组来存储id的骰子单击顺序。并使用该数组加载组件。

类似的东西：

const listDices = [
{value: 1, hidden: false, id:0},
{value: 2, hidden: false, id:1},
{value: 6, hidden: false, id:2},
{value: 6, hidden: false, id:3},
{value: 5, hidden: false, id:4},
];

const diceOrder = [];

handleDiceClick(diceId) {
  // ... Your stuff
  ...
  // update the dice order array
  // You need other logic to update the array. I am showing only adding.
  diceOrder.push(diceId);
}

const arrMiniDices = [];
diceOrder.map(id => {
  const item = listDices.find(dice => dice.id === id);
  if (item.hidden) {
    arrMiniDices.push(
      <BtnDice 
        key={item.id}
        value={item.value}
        className="btn__dice--small"
        onClick={() => handleHideDice(item.id)}
      />
    );       
  }
});

您必须在某处使用handleDiceClick。

如何通过第一个元素对对象进行排序

2 个答案: