React使用defaultValue更新单个用户字段时其他字段被清空的问题

核心问题 #

你遇到的问题本质是非受控组件+初始空state+后端全量覆盖导致的：

1. 你用了defaultValue（非受控组件），输入框初始值来自user.username，但对应的username/email state初始是空字符串，且没和输入框同步——没修改的输入框，state始终是空。
2. 提交时空state字段被塞进updatedUser传给后端，后端用$set: req.body直接全量覆盖数据库字段，自然会把未修改的字段设为空。

前端修复（必做） #

把输入框改成受控组件，并正确初始化state：

1. 初始化state时同步用户现有数据

// 不要初始化为空字符串，而是用user的现有值
const [username, setUsername] = useState(user?.username || "");
const [email, setEmail] = useState(user?.email || "");

注意：如果user是异步获取的（比如从context里加载），需要用useEffect同步：

useEffect(() => {
  if (user) {
    setUsername(user.username);
    setEmail(user.email);
  }
}, [user]);

2. 把defaultValue改成value，实现双向绑定

<input 
  type="text"
  className="loginInput"
  style={{ border: error ? '1px solid red' : '' }}
  value={username} // 替换defaultValue
  onChange={(e) => setUsername(e.target.value)}
/>

这样输入框的值和state完全同步，没修改的话，state就是用户原来的数值，不会是空。

3. 提交时合并原用户数据（可选，更安全）

如果怕漏传字段，可以把原user数据和修改后的state合并，只覆盖修改的部分：

const updatedUser = {
  userId: user._id,
  // 用展开运算符合并，state里的字段会覆盖原user的对应字段
  ...user,
  username,
  email,
};
// 若user里有不需要传给后端的字段（比如token），可手动筛选：
// const updatedUser = {
//   userId: user._id,
//   username,
//   email,
// };

后端优化（可选，双重保障） #

为防止前端不小心传空值，后端可以过滤掉req.body中的空字段，只更新有有效值的字段：

// UPDATE
router.put("/:id", async (req, res) => {
  if (req.body.userId === req.params.id) {
    // 过滤空值字段
    const updateData = {};
    Object.keys(req.body).forEach(key => {
      if (req.body[key] !== "") {
        updateData[key] = req.body[key];
      }
    });

    if (updateData.password) {
      const salt = await bcrypt.genSalt(10);
      updateData.password = await bcrypt.hash(updateData.password, salt);
    }
    try {
      const updatedUser = await User.findByIdAndUpdate(
        req.params.id,
        { $set: updateData }, // 用过滤后的对象
        { new: true }
      );
      res.status(200).json(updatedUser);
    } catch (err) {
      res.status(500).json(err);
    }
  } else {
    res.status(401).json("You can update only your account!");
  }
});

内容的提问来源于stack exchange，提问作者sultan.h