Node.js接口更新单字段时丢失其他字段的解决方法

场景还原 #

模拟页面数据：

const PAGES = [
  {
    id: "p1",
    name: "Webinar Butique",
    tema: "Boho",
    area: "Hardware Store",
    type: "Basic",
    imageUrl: "https://i.ytimg.com/vi/U72Aoxuv5d8/maxresdefault.jpg",
    creator: "u1",
  },
];

原更新接口实现：

const updatePageById = (req, res, next) => {
  const { name, tema, type, area } = req.body;
  const pageId = req.params.pid;

  const updatedPage = { ...PAGES.find((p) => p.id === pageId) };
  const pageIndex = PAGES.findIndex((p) => p.id === pageId);

  updatedPage.name = name;
  updatedPage.type = type;
  updatedPage.area = area;
  updatedPage.tema = tema;

  PAGES[pageIndex] = updatedPage

  res.status(201).json({page: updatedPage})
};

当发送PATCH请求到http://localhost:8080/api/pages/p1，仅传入name字段：

{
    "name": "new butique"
}

调用GET接口查询时，发现type、area、tema字段被清空。

问题原因 #

你直接从req.body解构出name、tema、type、area，当请求只传name时，其他三个变量的值是undefined，之后直接赋值给updatedPage的对应字段，会把原字段的值覆盖成undefined（最终序列化后表现为字段被清空）。

解决方案 #

只对req.body中存在的字段进行更新，以下是两种实用实现方式：

方式1：逐个判断字段是否存在后赋值 #

const updatePageById = (req, res, next) => {
  const pageId = req.params.pid;
  const targetPage = PAGES.find((p) => p.id === pageId);
  const pageIndex = PAGES.findIndex((p) => p.id === pageId);

  if (!targetPage) {
    return res.status(404).json({ message: "Page not found" });
  }

  const updatedPage = { ...targetPage };
  // 仅更新请求中实际传入的字段
  if (req.body.name !== undefined) {
    updatedPage.name = req.body.name;
  }
  if (req.body.tema !== undefined) {
    updatedPage.tema = req.body.tema;
  }
  if (req.body.type !== undefined) {
    updatedPage.type = req.body.type;
  }
  if (req.body.area !== undefined) {
    updatedPage.area = req.body.area;
  }

  PAGES[pageIndex] = updatedPage;
  res.status(200).json({ page: updatedPage }); // PATCH请求成功通常返回200，而非201
};

方式2：对象合并简化代码 #

利用展开运算符直接合并req.body的字段，仅覆盖传入的内容：

const updatePageById = (req, res, next) => {
  const pageId = req.params.pid;
  const pageIndex = PAGES.findIndex((p) => p.id === pageId);

  if (pageIndex === -1) {
    return res.status(404).json({ message: "Page not found" });
  }

  // 复制原对象并合并请求字段，仅更新传入的内容
  const updatedPage = { ...PAGES[pageIndex], ...req.body };
  PAGES[pageIndex] = updatedPage;

  res.status(200).json({ page: updatedPage });
};

如果需要限制可更新的字段范围，可先筛选请求体内容：

// 定义允许更新的字段列表
const allowedFields = ['name', 'tema', 'type', 'area'];
// 筛选出请求中仅允许更新的字段
const updateData = Object.fromEntries(
  Object.entries(req.body).filter(([key]) => allowedFields.includes(key))
);
const updatedPage = { ...PAGES[pageIndex], ...updateData };

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