调用findByIdAndDelete()无法删除TodoList待办项问题

核心故障原因 #

• 前端传参格式错误：list.ejs模板中复选框的value属性在输出item._id后多打了一个尾部空格，后端接收到的ID字符串末尾带无效空格，和数据库存储的ObjectId无法匹配，删除操作定位不到目标文档
• 后端路由逻辑缺失：/deleteItems接口执行完删除操作后没有做响应重定向，就算删除成功页面也不会刷新，视觉上会误以为删除失败，同时缺少错误场景的日志和响应处理

修复方案 #

1. 修正EJS模板的多余空格 #

找到list.ejs中复选框的代码行，删除<%= item._id %> 后面的多余空格，修改后代码如下：

<input type="checkbox" name="checkbox" value="<%= item._id %>" onChange="this.form.submit()">

2. 完善后端删除路由逻辑 #

给删除接口增加参数兜底处理、错误响应和操作完成后的重定向，修改app.js中的/deleteItems路由代码：

app.post("/deleteItems", function (req, res){
  // 加trim兜底处理，避免传参意外带前后空格
  const checkedItemId = req.body.checkbox.trim();
  Item.findByIdAndDelete(checkedItemId, function (err){
    if (err) {
      console.log("删除待办项失败：", err);
      res.sendStatus(500);
    } else {
      console.log("Successfully deleted checked item");
      // 删除完成后重定向回首页，刷新列表展示状态
      res.redirect("/");
    }
  });
});

修复完成后重启服务，勾选复选框时就可以正常删除对应待办项，页面会自动刷新展示最新的列表数据，数据库中对应文档也会同步被删除。

内容的提问来源于stack exchange，提问作者Darshan Verma