尽管视图初始化，有时仍会显示已删除的项目-Vue，Node.js [重复]答案

【问题标题】：Sometimes deleted item is still displayed although view initialization - Vue, Node.js [duplicate]尽管视图初始化，有时仍会显示已删除的项目-Vue，Node.js [重复]
【发布时间】：2021-07-30 15:26:51
【问题描述】：

我在 Vue.js、Node.js 和 MongoDB 中创建应用程序。我有一个项目列表，每个项目旁边都有删除按钮。通常它可以工作，但是一次，例如 20 次删除，被删除的项目保留在列表中，尽管列表在每次删除后初始化。手动刷新页面后，删除的项目消失了。如何解决？

vue 组件：

 methods: {
    async initialize() {
      return Service.getTool()
        .then((response) => {
          this.tools = response;
        })
        .catch((error) => {
          this.handleError(error, this.errors);
        })
        .finally(() => {
        });
    },
   async deleteItem(id) {
      await Service.deleteTool(id);
      await this.initialize();
    },
}

服务：

    static async getTool() {
        const res = await api.get('tool/get')
        try {
            return res.data;
        } catch (err) {
            return err;
        }
    }
    static deleteTool(id) {
        return api.delete(`${'delete'}/${id}`);
    }

后端：

router.delete('/delete/:id', (req, res) => {
  Tool.deleteOne({ _id: req.params.id }, function (err) {
    if (!err) {
      return res.json('Item has been deleted');
    }
    else {
      res.status(500).send(err);
    }
  });
})

【问题讨论】：

可能有网络/服务器错误？
但是删除的项目在数据库中被删除了，只是视图显示不正确
没问题，只需尝试 remove({ _id: req.params.id }) 方法而不是 2 个操作 findOne 和 remove 参见 answer
router.remove 是你的主函数，不要改变它，在那个函数里面只写remove方法而不是findOne。喜欢Tool.remove({ _id: req.body.id }...
现在效果很好。非常感谢@turivishal :))

标签： node.js mongodb vue.js

【解决方案1】：

该项目在报告时未被删除：

  tool.remove();
  return res.json('Item has been deleted');

当有许多项目要处理时会出现问题，这意味着竞争条件需要足够长的时间才能显示出来。

基于回调的 API 对于所有主要库都已过时。它应该已经通过 Promise 实现了：

try {
  const tool = await Tool.findOne({ _id: req.params.id });
  ...
  await tool.remove();
  return res.json('Item has been deleted');

【讨论】：

我使用了从评论到这个问题的解决方案——我使用了 deleteOne 而不是 findOne，它也可以正常工作。我通过向其中添加更新的后端代码来编辑我的问题。你能检查一下，然后说这个解决方案是更好的还是你的？
最好使用 deleteOne 而不是 findOne，因为它执行的查询更少。 deleteOne 适用于这种特定情况，因为 1 个查询没有竞争条件。但不会阻止与更复杂查询的回调相关的问题。您正在使用过时的 API，请尽可能遵守承诺。
谢谢。我会照你写的去做。我不知道我使用的是过时的 API。能否请您给我发送更新 API 的链接？因为在网站上，每个解决方案都是如此不同，我不知道哪个是正确的。
问题说你使用Mongo，但实际上你使用Mongoose，不是吗？官方文档是最新的。
是的，我会检查的。谢谢。

【解决方案2】：

我从评论中使用了@turivishal 的解决方案：

router.delete('/delete/:id', (req, res) => {
  Tool.deleteOne({ _id: req.params.id }, function (err) {
    if (!err) {
      return res.json('Item has been deleted');
    }
    else {
      res.status(500).send(err);
    }
  });
})

【讨论】：