根据另一个数组对一个数组进行排序

Question

我有一个问题列表，我想将其呈现为可排序的卡片。数据看起来像这样：

const questionList = [
  {
    id: 1,
    data: {
      question: "What is your name?"
    }
  },
  {
    id: 2,
    data: {
      question: "How old are you?"
    }
  }
...
]

我正在使用 Framer Motion 提取 ID 并渲染一个 Reorder.Group 组件，该组件可以很好地拖动以重新排序：

<Reorder.Group values={listIds} onReorder={handleReorder}>
        {listIds.map((id) => {
          return (
            <Reorder.Item className="card" key={id} value={id}>
              <span>{id}.</span>
              <span>{questions[id - 1].data.question}</span>
            </Reorder.Item>
          );
        })}
</Reorder.Group>

完整的实现可以在这里找到 - https://codesandbox.io/s/nice-stitch-48v0ee

但是我想保留新的问题顺序，这意味着我需要重新排列问题列表中的项目以匹配任何新顺序。如何匹配问题数组（带有 id）以始终匹配通过重新排序生成的新索引？因此，如果用户将初始顺序更改为 [2, 1, 3, 4, 5] 我想对问题列表进行排序，以便问题 ID 与这个新顺序相匹配。

Answer 1

您可以在第二个数组上使用 map 函数来做到这一点，您 find 匹配数字

的元素

例子

const questions = [
  {
    id: 1,
    data: {
      question: "What is your name?"
    }
  },
  {
    id: 2,
    data: {
      question: "How old are you?"
    }
  },
  {
    id: 3,
    data: {
      question: "Where do you leave?"
    }
  },
  {
    id: 4,
    data: {
      question: "Foo"
    }
  },
  {
    id: 5,
    data: {
      question: "Bar"
    }
  },
]

const newOrder = [2,1,5,4,3]

const newQuestionsOrdered = newOrder.map(x => questions.find(question => question.id === x))

console.log(newQuestionsOrdered)

根据另一个数组对一个数组进行排序

Sort an array based on another array

javascript

reactjs

framer-motion