如何实现点击编辑按钮仅更新数据库指定行，避免全量更新？

核心问题 #

你的更新逻辑未指定唯一用户ID作为过滤条件，导致后端执行UPDATE语句时修改了数据库内所有行，而非目标行。

前端修复（userList.jsx + EditUser.jsx） #

• 点击某行编辑按钮时，将当前用户的id（或唯一标识）传递给EditUser组件，可通过状态或props存储当前编辑用户的ID。
• 提交编辑表单时，除了要更新的用户名、邮箱等数据，需将该用户ID一并传给后端接口。

示例伪代码：

// EditUser组件提交逻辑
const handleSubmit = () => {
  fetch('/api/update-user', {
    method: 'POST',
    body: JSON.stringify({
      id: currentUserId, // 传入当前编辑用户的ID
      name: editedName,
      email: editedEmail
    })
  })
}

后端修复（backend.js） #

修改UPDATE SQL语句，添加WHERE id = ?条件，确保仅更新指定ID的用户：

// 原无过滤条件的错误写法（会更新所有行）
// db.query("UPDATE users SET name = ?, email = ?", [name, email])

// 修改为带ID过滤的正确写法
db.query("UPDATE users SET name = ?, email = ? WHERE id = ?", [name, email, userId])

注意要从前端请求中提取传递过来的userId，作为第三个参数传入SQL语句。

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