时间戳

首页 > 解决方案 > 如何将所有数组项重新排序到 React 中的特定索引？

javascript - 如何将所有数组项重新排序到 React 中的特定索引？

问题描述

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

我已经尝试过了，但它不起作用，因为映射时数据会发生变化。我只是无法理解我的逻辑，如何实现这一点。

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

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

我在这里做错了什么？

标签： javascriptarraysreactjssorting

解决方案

你可以这样做：

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

推荐阅读