点击切换MongoDB用户状态仅首次生效，求原因及解决方法

我正在开发一个电商项目，管理员需求为点击即可修改用户状态。我尝试了如下实现方式：

前端代码：

<td id="status" onclick="changeStatus('<%=user._id%>' , '<%=user.status%>')"></td> 

async function changeStatus(id , status){
      try{
        const res = await fetch("/admin/customers" , {
            method:"POST",
            body:JSON.stringify({id , status}),
            headers:{"Content-Type":"application/json"}
        })
        const data = await res.json()

        if(data.message.includes("success")){
            location.reload()
        }
      }
      catch(err){
        console.log(err)
      }
    }

服务端代码：

customer_status: async (req , res) => {
  let {id, status} = req.body
  try{
    const updateStatus = await User.findByIdAndUpdate({_id:id} , {$set:{status:!status}} , {new:true})
    console.log(updateStatus)
    res.json({message:"success"})
  }
  catch(err){
    console.log(err)
  }
},

但该实现仅对用户首次点击有效，无法持续更新状态，请问原因是什么？

核心问题出在模板渲染的status值是字符串类型，服务端用!status取反时逻辑失效：

• 首次点击时，模板传入的status是数据库里的布尔值（比如true），嵌入HTML后变成字符串"true"，服务端! "true"得到false，首次更新正常。
• 页面重载后，模板重新渲染的status是字符串"false"，此时! "false"依然是false（非空字符串取反结果都是false），导致后续点击无法切换状态。

另外，多个用户行的<td>共用同一个id="status"，违反HTML唯一ID规范，但这不是功能失效的直接原因。

方案1：修正前端传入的status类型 #

在模板里直接将status以布尔值形式传入，避免字符串转换问题：

<td onclick="changeStatus('<%=user._id%>', <%=user.status%>)"></td>

或者在前端函数里手动转换类型：

async function changeStatus(id , status){
  // 把字符串转为布尔值
  const boolStatus = status === 'true';
  try{
    const res = await fetch("/admin/customers" , {
        method:"POST",
        body:JSON.stringify({id , status: boolStatus}),
        headers:{"Content-Type":"application/json"}
    })
    const data = await res.json()
    if(data.message.includes("success")){
        location.reload()
    }
  }
  catch(err){
    console.log(err)
  }
}

方案2：服务端改用可靠的状态切换逻辑 #

不依赖前端传入的status值，直接从数据库查询当前状态后切换，彻底避免类型问题：

customer_status: async (req , res) => {
  const {id} = req.body
  try{
    // 先查询用户当前状态
    const user = await User.findById(id);
    if(!user) return res.json({message: "用户不存在"});
    // 切换状态
    const updateStatus = await User.findByIdAndUpdate(id , {$set:{status: !user.status}} , {new:true})
    console.log(updateStatus)
    res.json({message:"success"})
  }
  catch(err){
    console.log(err)
    res.json({message: "更新失败"})
  }
},

可选优化：局部更新DOM，避免页面重载 #

成功更新后不用刷新整个页面，直接修改当前<td>的内容，提升用户体验：

async function changeStatus(id , status , element){
  const boolStatus = typeof status === 'string' ? status === 'true' : status;
  try{
    const res = await fetch("/admin/customers" , {
        method:"POST",
        body:JSON.stringify({id}),
        headers:{"Content-Type":"application/json"}
    })
    const data = await res.json()
    if(data.message.includes("success")){
      // 局部更新当前单元格的显示文本
      element.textContent = !boolStatus ? "启用" : "禁用";
      // 也可以切换样式类
      element.classList.toggle("status-active");
    }
  }
  catch(err){
    console.log(err)
  }
}

调用时传入当前元素：

<td onclick="changeStatus('<%=user._id%>', <%=user.status%>, this)"><%=user.status ? '启用' : '禁用'%></td>

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