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

Posted 2023-02-22

【中文标题】尽管视图初始化，有时仍会显示已删除的项目-Vue，Node.js [重复]

【英文标题】：Sometimes deleted item is still displayed although view initialization - Vue, Node.js [duplicate]

【发布时间】：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 :))

【参考方案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);
    
  );
)