拖放后如何更新记录

use*_*989 5 mongoose mongodb node.js reactjs

我正在使用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();
  };
Run Code Online (Sandbox Code Playgroud)

我将新数组发送到后端,其中所有内容都按拖放后的顺序排列。问题是我真的不知道在后端如何处理它。我是否需要删除所有记录,然后循环数组并插入新记录?我最初想循环记录并更新它们,但它实际上没有做任何事情,可能是因为代码错误或者我的逻辑错误,因为它所做的只是用完全相同的数据覆盖,因为所有改变的是数组的顺序,而不是数组中的实际 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 } });
  });
};
Run Code Online (Sandbox Code Playgroud)

这是页面加载时的数组:

[
  {
    _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
  }
]
Run Code Online (Sandbox Code Playgroud)

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

[
  {
    _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
  }
]
Run Code Online (Sandbox Code Playgroud)

Pas*_*ers 5

如果您更新文档,请使用数组中的索引值来更新订单 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);
Run Code Online (Sandbox Code Playgroud)

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

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