Vue.js+Express中MongoDB重复更新3次问题求助（关联this.$router.push）

我来帮你拆解这个重复更新的坑——这种情况我碰到过好几次，结合你提到的this.$router.push，大概率是事件重复触发或者异步操作与路由跳转的顺序问题导致的，咱们一步步排查：

1. 先查前端：更新请求是不是被触发了3次？ #

打开浏览器DevTools的Network面板，触发更新操作，看看是不是真的发送了3次PUT/POST请求：

• 如果是，那问题出在前端的触发逻辑上：
  • 检查绑定更新函数的元素，是不是同时绑了多个事件？比如按钮既绑了@click又绑了@submit，或者在v-for里循环绑定事件导致重复触发；
  • 看看是不是在Vue的生命周期钩子（比如watch、mounted）或者路由守卫（beforeRouteLeave）里也调用了更新接口？比如你在点击按钮发请求的同时，beforeRouteLeave又发了一次，叠加起来就多了；
  • 重点看this.$router.push的时机：很多人会在异步请求还没完成时就跳转路由，这时候Vue的组件可能因为销毁/更新逻辑，导致请求被重复发送。必须等请求完成后再跳转：

    // 错误写法：请求还没完成就跳转，可能导致重复发送
    this.$axios.put('/api/update-posts', this.posts)
    this.$router.push('/target-page')
    
    // 正确写法：确保请求结束后再执行跳转
    this.$axios.put('/api/update-posts', this.posts)
      .then(res => {
        console.log('更新成功:', res)
        this.$router.push('/target-page')
      })
      .catch(err => {
        console.error('更新失败:', err)
        // 这里可以加错误提示，别直接跳转
      })
    

2. 再查后端：MongoDB更新语句是不是写错了？ #

如果Network面板显示只发送了1次请求，但数据库里还是多了3条记录，那肯定是后端的更新逻辑有问题：

• 检查你用的是$push还是$set：
  • 如果你想替换整个date数组，应该用$set，否则$push会把前端传过来的数组整个追加到原数组后面，导致重复：

    // 错误：用$push会追加数组，导致date里多了3条重复记录
    Post.updateOne(
      { netid: req.body.netid },
      { $push: { date: req.body.date } } // 这里会把整个date数组推进去
    )
    
    // 正确：用$set替换整个date数组
    Post.updateOne(
      { netid: req.body.netid },
      { $set: { date: req.body.date } }
    )
    

• 另外，检查Express的路由是不是被重复注册了？比如不小心写了两次app.put('/api/update-posts', updateHandler)，那每次请求都会被处理两次甚至多次。

3. 最后排查Vue响应式数据的意外修改 #

看看this.posts.date是不是在发送请求前就被修改了多次：

• 在调用更新接口前加个console.log(this.posts.date)，看看数组长度和内容是不是已经重复了；
• 检查有没有watch监听了posts或者posts.date，在监听回调里又做了push操作，导致数据被多次修改后才发送请求。

按照这个顺序排查，应该能快速定位到问题！

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