React应用中ES6 Map回调存值后为空的异常问题

这种坑我之前踩过好几次！大概率是这几个常见问题导致的，咱们一个个梳理解决：

常见原因及对应解决办法 #

1. 你可能在回调执行前就提前打印了tempMap #

如果你的回调是异步触发的——比如API请求、用户点击事件、setTimeout这类——而你在回调还没执行的时候就急着打印tempMap，那它自然是空的啊！毕竟赋值操作还没跑呢。

修复示例：
把打印代码挪到回调内部，确保赋值完成后再查看：

// 先基于组件状态创建tempMap的副本
const tempMap = new Map(blockMap);
// 异步回调操作
fetch('/api/get-data')
  .then(res => res.json())
  .then(data => {
    tempMap.set('data', data);
    // 在这里打印，确保值已经存进去了
    console.log(tempMap); 
  });

2. React状态的异步更新让你拿到了旧值 #

React的useState更新是异步批量处理的，也就是说你刚调用setBlockMap更新状态，立刻去读blockMap拿到的还是更新前的旧值。如果这时候你基于旧的空Map创建tempMap，那tempMap从一开始就是空的。

修复方式有两种：

• 用useEffect监听状态变化，拿到最新值再处理：

const [blockMap, setBlockMap] = useState(new Map());

// 当blockMap状态更新时，自动触发这个副作用
useEffect(() => {
  const tempMap = new Map(blockMap);
  // 执行你的回调操作
  someAsyncCallback(() => {
    tempMap.set('newKey', 'testValue');
    console.log(tempMap);
  });
}, [blockMap]); // 依赖项填blockMap，状态变了就重新执行

// 更新状态的函数
const updateMap = () => {
  setBlockMap(prev => new Map(prev.set('id', '123')));
};

• 或者在同一个函数里先创建临时Map，更新后同步给状态和tempMap：

const updateMap = () => {
  // 先创建临时Map，更新它
  const updatedMap = new Map(blockMap);
  updatedMap.set('id', '123');
  // 同步更新组件状态
  setBlockMap(updatedMap);
  // 直接用这个更新后的Map作为tempMap
  const tempMap = updatedMap;
  someAsyncCallback(() => {
    tempMap.set('newKey', 'testValue');
    console.log(tempMap);
  });
};

3. 你直接引用了状态Map，没创建独立副本 #

如果你写的是const tempMap = blockMap，那tempMap和blockMap其实是同一个Map实例。之后如果通过setBlockMap创建了新的Map实例更新状态，回调里操作的还是旧的那个实例，就会出现“看起来tempMap是空的”错觉。

修复办法：
一定要创建独立的副本，确保tempMap是全新的实例：

// 正确创建副本，和原状态Map互不干扰
const tempMap = new Map(blockMap);
// 后续操作tempMap不会影响原组件状态（除非你主动调用setBlockMap）
tempMap.set('key', 'value');

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