React应用中如何正确克隆Map对象以解决数据异常问题？

首先明确几个核心问题：

• 直接赋值const newVideoTracks = user.videoTracks;只是获取原Map的引用，并非真正克隆，原Map的任何修改都会同步到这个变量，这也是你遇到显示异常的潜在原因（浏览器控制台常显示变量实时状态而非赋值时的快照）。
• Object.assign({}, user.videoTracks)会崩溃，是因为Object.assign仅适用于普通对象，Map属于特殊集合类型，无法通过这种方式处理。

针对你的场景，正确的克隆方式分两种情况：

1. 浅克隆（Map值为基本类型或无需深度克隆） #

标准的浅克隆写法就是new Map(originalMap)，你觉得没效果可能是这两个原因：

• 克隆后修改了原Map：浅克隆仅复制键值对的引用，若值为对象，原对象的变化仍会影响克隆后的Map。
• 控制台显示延迟：浏览器控制台展开Map时读取的是实时状态，而非打印时的快照，可通过console.log([...newVideoTracks.entries()])打印数组形式的条目，查看真实状态。

示例代码：

// 正确浅克隆方式
const newVideoTracks = new Map(user.videoTracks);

// 验证克隆结果
console.log('克隆后的条目：', [...newVideoTracks.entries()]);
console.log('克隆后的size：', newVideoTracks.size);

2. 深克隆（Map值为对象，需完全独立副本） #

如果Map中存储的是对象，需要彻底克隆避免关联修改，可遍历原Map条目逐个克隆值：

const newVideoTracks = new Map();
for (const [key, value] of user.videoTracks.entries()) {
  // 根据值的类型选择克隆方式，比如数组用扩展运算符，对象用解构
  const clonedValue = Array.isArray(value) ? [...value] : {...value};
  // 也可使用浏览器原生结构化克隆（支持大部分数据类型）
  // const clonedValue = structuredClone(value);
  newVideoTracks.set(key, clonedValue);
}

另外你遇到的控制台显示Map(1)但实际有2个条目，大概率是控制台快照问题——打印后原Map被修改，导致展开时显示的是最新状态而非打印时刻的状态，用数组形式打印条目就能看到真实内容。

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