拖放后如何更新记录

Posted 2023-03-07

【中文标题】拖放后如何更新记录

【英文标题】：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
  
]

【问题讨论】：

您想在数据库中存储/维护项目的自定义顺序，对吗？就像拖放项目列表并保持顺序不变。我有同样的问题***.com/questions/59193436/…，但还没有找到任何解决方案。奇怪的是我还没有发现任何问题，因为我认为这是一个非常基本的问题。

是的，我在数据库中有一个订单号列，即：1、2、3、4、5。这基本上是一个排序顺序列，不同于主键 ID 或长创建新记录时获得的 mongo id。在前端，我按排序顺序排序，但也试图找出在拖放后保留数据的逻辑。

你的模型怎么样？

我的模型看起来很正常（猫鼬），除了我有一个自动增量包，因此我的排序列有一个自动增量编号。它非常易于使用，可以在这里找到：npmjs.com/package/mongoose-sequence

为什么我们需要发送整个数组来改变顺序？我们不能只发送源和目标两个 id 并仅更新这两个 id 的顺序吗？我认为这可以通过唯一的订单索引和 _id

【参考方案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”键。

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