如何在React中将所有数组项重新排序到特定索引?

问题描述 投票:0回答:3

我的用户可以对类别列表进行重新排序,并且我需要保留数组项的索引,以便即使用户关闭应用程序也可以保持顺序。

我已经尝试过了,但是它不起作用,因为映射时数据会更改。我只是无法理解逻辑,如何实现这一目标。

下面是示例数据,以及我尝试过的逻辑:

order: [
  {id: "5", index: 0},
  {id: "4", index: 1},
  {id: "1", index: 2},
  {id: "2", index: 3},
  {id: "3", index: 4},
]

data: [
  {id: "1", category: "Category1"},
  {id: "2", category: "Category2"},
  {id: "3", category: "Category3"},
  {id: "4", category: "Category4"},
  {id: "5", category: "Category5"},
]

orderCategories = (data, order) => {
  data.map((dataValue, dataIndex) => {
    order.map((value, index) => {
      if (dataValue.id === value.id && dataIndex !== index) {
        this.setState({data: arrayMove(data, dataIndex, index)})
      }
    });
  });
};

下面是结果数据数组:

data: [
  {id: "5", category: "Category5"},
  {id: "1", category: "Category1"},
  {id: "2", category: "Category2"},
  {id: "3", category: "Category3"},
  {id: "4", category: "Category4"},
]

但是我希望它是:

data: [
  {id: "5", category: "Category5"},
  {id: "4", category: "Category4"},
  {id: "1", category: "Category1"},
  {id: "2", category: "Category2"},
  {id: "3", category: "Category3"},
]

我在这里做错了什么?

javascript arrays reactjs sorting
3个回答
1
投票

您可以执行以下操作:

orderCategories = (data, order) => {
order.forEach(order => {
    result[order.index] = data.find(data => data.id === order.id)
  }
return result;
)}

0
投票

将索引存储在同一data对象中可能更容易,以便可以使用.sort

[
  {id: "1", category: "Category1", index: 2},
  {id: "2", category: "Category2", index: 3},
  {id: "3", category: "Category3", index: 4},
  {id: "4", category: "Category4", index: 1},
  {id: "5", category: "Category5", index: 0},
]

然后像这样排序:

data.sort((a, b) => a.index - b.index)




0
投票

您可以使用.sort()功能并通过比较器作为参数。

orderCategories = (data, order) => {
  return data.sort((item1, item2) => {
     const index1 = order.find(orderItem => orderItem.id === item1.id).index;
     const index2 = order.find(orderItem => orderItem.id === item2.id).index;

    return index1 - index2;
  });
};
© www.soinside.com 2019 - 2024. All rights reserved.