根据MongoDB ID编辑指定用户数据时出现批量更新或undefined如何解决

问题根源 #

• 你在循环遍历用户列表的过程中，每次都给全局唯一的更新按钮.update绑定了新的点击事件，循环执行多少次就绑定了多少个事件，点击更新时所有绑定的回调会依次执行，导致所有用户都被修改
• 没有临时存储当前正在编辑的用户ID，调用更新接口时也没有传入正确的用户ID参数，而是传了DOM元素的ID，接口请求路径错误

修复步骤 #

第一步：新增全局变量存储当前编辑的用户ID #

在代码最外层添加变量：

let currentEditUserId = ''

第二步：修改编辑按钮的点击事件逻辑 #

点击编辑按钮时，把当前行的用户ID存入全局变量，同时可以把用户原有数据回填到模态框输入框优化体验：

btn1edit.addEventListener("click", () => {
  // 存储当前编辑的用户ID
  currentEditUserId = item._id
  // 回填原有数据到模态框
  document.getElementById("upName").value = item.name
  document.getElementById("upEmail").value = item.email
  document.getElementById("upAddress").value = item.address
  editwindow()
});

注意：必须删除循环内给.update绑定事件的代码，不要在循环里绑定全局按钮的事件

第三步：全局仅绑定一次更新按钮的点击事件 #

把更新按钮的事件绑定移到tableShowUser函数外部，全局只绑定一次：

document.querySelector(".update").addEventListener("click", () => {
  // 直接传入存储好的当前编辑用户ID
  upDATE(currentEditUserId)
})

第四步：修改upDATE函数的接口请求逻辑 #

将原先传入的DOM元素ID替换为实际用户ID，拼接正确的后端更新接口路径：

function upDATE(editUserId) {
  let name = document.getElementById("upName").value;
  let email = document.getElementById("upEmail").value;
  let address = document.getElementById("upAddress").value;
  if (name == "" && email == "" && address == "") {
    alert("Please Enter Something in USER input field(s)!!");
  } else {
    // 替换为你实际的后端更新接口地址，将用户ID拼接到路径中
    axios
      .put(`/你的后端更新接口路径/${editUserId}`, {
        name,
        email,
        address,
      })
      .then((response) => {
        alert("User Updated Successfully");
        console.log(response.data);
        // 编辑完成清空存储的ID
        currentEditUserId = ''
        tableShowUser()
      })
      .catch((error) => {
        console.log(error);
      });
  }
  setTimeout(() => {
    document.getElementById("upName").value = "";
    document.getElementById("upEmail").value = "";
    document.getElementById("upAddress").value = "";
  },2000)
  cLose();
}

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