拖放后如何更新记录答案

【问题标题】：how to update records after drag and drop拖放后如何更新记录
【发布时间】：2020-09-18 16:07:52
【问题描述】：

我正在使用react-sortable-hoc 拖放和重新排序项目。当我这样做时，虽然我想更新数据库（node.js 和 mongodb）。

首先，我已将其更改为功能组件，这就是为什么我的语法看起来与示例有点不同的原因。

const onSortEnd = ({ oldIndex, newIndex }) => {

    setItems((items) => arrayMove(items, oldIndex, newIndex));

    const newArray = arrayMove(items, oldIndex, newIndex);

    async function makePatchRequest() {
      const config = {
        method: "patch",
        url: "http://localhost:8000/api/admin/faq/order",
        headers: { Authorization: "Bearer " + auth.token },
        data: {
          order: newArray,
        },
      };

      let res = await axios(config, { order: newArray });

    }
    makePatchRequest();
  };

我将新数组发送到后端，拖放后的所有内容都按顺序排列。问题是我真的不知道如何在后端处理它。我是否需要删除所有记录，然后遍历数组并插入新记录？我最初想遍历记录并更新它们，但它实际上并没有做任何事情，可能是因为代码错误或我的逻辑错误，因为它所做的只是用完全相同的数据覆盖，因为所有改变的是数组的顺序，而不是数组中的实际 id 或 _id。

exports.faqSort = async (req, res) => {
  const { order } = req.body;
  console.log(order);

  await order.map((o) => {
    Faq.update({ _id: o._id }, { $set: { id: o.id } });
  });
};

这是页面加载时的数组：

[
  {
    _id: '5ed273049b268308302cb1fb',
    question: 'question 1',
    answer: 'answer 1',
    id: 1,
    __v: 0
  },
  {
    _id: '5ed273439b268308302cb1fd',
    question: 'question 2',
    answer: 'answer 2',
    id: 2,
    __v: 0
  },
  {
    _id: '5ed276129b268308302cb1ff',
    question: 'quesiton 3',
    answer: 'answer 3',
    id: 3,
    __v: 0
  }
]

这是我发送到后端的新数组

[
  {
    _id: '5ed276129b268308302cb1ff',
    question: 'quesiton 3',
    answer: 'answer 3',
    order: 3,
    __v: 0
  },
  {
    _id: '5ed273049b268308302cb1fb',
    question: 'question 1',
    answer: 'answer 1',
    order: 1,
    __v: 0
  },
  {
    _id: '5ed273439b268308302cb1fd',
    question: 'question 2',
    answer: 'answer 2',
    order: 2,
    __v: 0
  }
]

【问题讨论】：

您想在数据库中存储/维护项目的自定义顺序，对吗？就像拖放项目列表并保持顺序不变。我有同样的问题stackoverflow.com/questions/59193436/…，但还没有找到任何解决方案。奇怪的是我还没有发现任何问题，因为我认为这是一个非常基本的问题。
是的，我在数据库中有一个订单号列，即：1、2、3、4、5。这基本上是一个排序顺序列，不同于主键 ID 或长创建新记录时获得的 mongo id。在前端，我按排序顺序排序，但也试图找出在拖放后保留数据的逻辑。
你的模型怎么样？
我的模型看起来很正常（猫鼬），除了我有一个自动增量包，因此我的排序列有一个自动增量编号。它非常易于使用，可以在这里找到：npmjs.com/package/mongoose-sequence
为什么我们需要发送整个数组来改变顺序？我们不能只发送源和目标两个 id 并仅更新这两个 id 的顺序吗？我认为这可以通过唯一的订单索引和 _id

标签： node.js reactjs mongodb mongoose

【解决方案1】：

如果您更新文档，请使用数组中的索引值来更新订单 ID。

const promises = order.map( async (o, index) => {

  let orderkey = index + 1;
  const promise = Faq.updateOne({ _id: o._id }, { $set: { order: orderkey } });

  return promise;

});

const results = await Promise.all(promises);

这样order 键将根据您发送的数组的顺序进行更新。

但请考虑在将其发送到后端之前实际更新前端中的order 键。这样数组的顺序就无关紧要了。

【讨论】：

我不确定它在实际更新中是否同样有效，也许这就是它不起作用的原因，但如果我 console.log 那么 + 1 实际上并没有做数学运算，它最终使 0 = 01, 1 = 11, 2 = 21 编辑：实际上不，我手动更新了数据库值以从 0 开始订单，但仍然没有更新。 console.log 显示正确的数据，例如：question 3 0 question 1 1 question 2 2
哈，这很奇怪。上次我检查时，index 是数字。添加另一个数字仍然应该给你一个数字。然后让我们在更新文档之前进行数学计算。更新了我的答案。
已更改为 updateMany 并且可以正常工作！ :) 仍然只是看看你到底做了什么以及它为什么起作用等等，所以我真的明白为什么
再次感谢，我希望它对您的问题以及您之前链接到的问题有所帮助
我宁愿建议只更新后端中的这两个 id，否则您最终将迭代该列中的整个列表数组，这样做是繁重的操作。只需获取源和目标项目 ID 并更改它们的顺序

【解决方案2】：

我认为最简单和最安全的方法就是在数组持有的对象中使用“order”键。您可以将数组保持在任何顺序，而不是使用“order”键来处理顺序。

您始终可以使用内置的 sort() 方法来操作您的数组，或者在 Mongoose 中查询“order”键。

基本上，不要使用数组的顺序，而是使用你自己的顺序。

【讨论】：