资料列表按名称排序后，编辑弹窗用 `{ ...row }` 创建草稿。改了草稿中的标签，再点取消，列表里的标签却已经变了。排查时，先检查列表和草稿各自持有的对象引用。

此前的排序示例返回新数组，其中的记录仍指向原对象。下面用自造数据延伸这个问题，检查资料进入编辑弹窗后哪些引用需要断开。 [Intl.Collator 排序示例](https://blog.csdn.net/mmsllcom/article/details/166781152)

![列表记录与浅拷贝草稿共享嵌套标签，显式复制可编辑字段后两份状态独立](https://developer.qcloudimg.com/http-save/yehe-10501221/03d8d3331ed05b4eed14e7f9ae96e34e.png)

## 新建了外层对象，标签仍然共享

先运行这段代码。比较时同时检查外层记录、标签数组和数组里的对象。

```javascript
function makeRow() {
  return {
    id: "doc-1",
    title: "设备说明",
    tags: [{ id: "t1", name: "待整理" }],
    meta: { revision: 3 }
  };
}

const row = makeRow();
const rows = [{ id: "doc-2", title: "安装指南", tags: [] }, row];
const collator = new Intl.Collator("zh-CN");
const sortedRows = [...rows].sort((a, b) => collator.compare(a.title, b.title));
const selected = sortedRows.find(item => item.id === "doc-1");
const draft = { ...selected, tags: [...selected.tags] };

draft.tags[0].name = "已归档";

console.log({
  sameOuterObject: row === draft,
  sameTagArray: row.tags === draft.tags,
  sameTagObject: row.tags[0] === draft.tags[0],
  originalTagName: row.tags[0].name
});
// false, false, true, "已归档"
```

这里复制了记录对象和数组，却没有复制数组中的标签对象。改 `draft.tags[0].name` 时，两个容器都能看到同一个标签对象的新值。关闭弹窗只能丢弃草稿变量，已经写到共享对象上的值还在。 [ECMAScript 对象展开与属性复制](https://tc39.es/ecma262/multipage/ecmascript-language-expressions.html#sec-object-initializer)

## 按可编辑字段创建草稿

如果弹窗只允许编辑标题和标签，就用这些字段建立草稿。标签只有标识和名称，每个标签用新对象承载。提交时再由草稿生成载荷，让后续输入也不会改到已经交给保存逻辑的数据。

```javascript
function copyTags(tags) {
  return tags.map(({ id, name }) => ({ id, name }));
}

function beginEdit(row) {
  return {
    id: row.id,
    title: row.title,
    tags: copyTags(row.tags)
  };
}

function buildSavePayload(draft) {
  return {
    title: draft.title.trim(),
    tags: copyTags(draft.tags)
  };
}

const original = makeRow();
const edit = beginEdit(original);
edit.title = "  设备说明新版  ";
edit.tags[0].name = "已归档";

const payload = buildSavePayload(edit);
edit.tags[0].name = "还在输入";

console.log(original.tags[0].name); // 待整理
console.log(payload.title);         // 设备说明新版
console.log(payload.tags[0].name);  // 已归档
```

点击取消时，直接丢弃 `edit`。点击保存时，把 `edit.id` 用作记录标识，把 `payload` 交给保存逻辑。收到服务端确认后，再用返回的记录更新列表。这里的 `meta.revision` 留在原记录中，若接口要求版本检查，调用方应按接口约定单独传递版本。

这个函数适用于标签只有两项字符串字段的例子。以后增加可编辑的嵌套字段时，草稿和载荷都需要同步调整复制范围。构建载荷也只负责复制与标题去边缘空白，长度、权限与字段规则由应用另行校验。

## 用 structuredClone 复制完整的可克隆数据

当表单确实需要整份普通数据对象，并且字段均支持结构化克隆，可以直接克隆。下面同时演示独立的嵌套对象、保留的 `Date` 和遇到函数时报错。

```javascript
const detailed = {
  ...makeRow(),
  updatedAt: new Date("2026-11-14T01:00:00Z")
};

const cloned = structuredClone(detailed);
cloned.tags[0].name = "已归档";
console.log(detailed.tags[0].name); // 待整理
console.log(cloned.updatedAt instanceof Date); // true

try {
  structuredClone({ ...detailed, formatTitle() { return this.title; } });
} catch (error) {
  console.log(error.name); // DataCloneError
}
```

结构化克隆支持多种内建数据类型，也能保留循环引用。对象里的函数会导致克隆失败。对含有自定义原型或属性描述符的对象，应先确认复制后的行为是否符合调用方要求。 [MDN structuredClone](https://developer.mozilla.org/en-US/docs/Web/API/Window/structuredClone) · [结构化克隆支持的类型与限制](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm)

| 操作 | 本例中适用的复制范围 |
| --- | --- |
| 只重新排序、渲染列表 | 新数组即可，记录对象供读取 |
| 编辑标题与标签 | 新建草稿和标签对象 |
| 将草稿交给异步保存 | 在提交时生成独立载荷 |
| 编辑整份可克隆数据 | 按数据类型选用 structuredClone |

本地执行了三段原文示例，并检查取消后的原值、增删标签、提交载荷和草稿分离、日期保留与不可克隆函数。示例覆盖数据引用关系，服务端并发更新仍由接口的版本约定处理。

本文部分内容使用 AI 辅助整理。数据与图解为自制示例。

资料列表按名称排序后，编辑弹窗用 { ...row } 创建草稿。改了草稿中的标签，再点取消，列表里的标签却已经变了。排查时，先检查列表和草稿各自持有的对象引用。

点了取消编辑，为什么列表里的原数据还是变了？

前端

编程语言

编辑弹窗修改标签后取消，列表数据却意外变更，源于对象引用未完全断开。浅拷贝仅复制外层数组和记录，标签对象仍共享。解决方案：为可编辑字段创建全新草稿对象，提交时生成独立载荷；或使用structuredClone深度克隆整份数据。确保草稿修改不影响列表原始数据。

代码解释

容器

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

点了取消编辑，为什么列表里的原数据还是变了？-腾讯云开发者社区-腾讯云

点了取消编辑，为什么列表里的原数据还是变了？

点了取消编辑，为什么列表里的原数据还是变了？

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐