已填充数据的Map对象为何显示size为0？

架构老林

2026-8-6

React中Map状态在子组件更新时为空的问题分析及解决

闭包陷阱导致捕获旧状态

函数组件中状态会形成闭包，如果updateCatalogueValue未用useCallback包裹，父组件因API请求完成重渲染后，子组件拿到的仍是旧的函数引用，其中的catalogueResponse还是初始空Map。

解决：
用useCallback包裹更新函数，将catalogueResponse作为依赖：

const updateCatalogueValue = useCallback((key, value) => {
  setCatalogueResponse(prev => new Map(prev).set(key, value));
}, [catalogueResponse]);

同时子组件可通过memo包裹，确保函数引用更新时能获取最新版本。

未遵循引用类型状态的不可变性

Map是引用类型，直接修改原Map再调用setCatalogueResponse，React无法检测到状态变化，组件不会重渲染，子组件拿到的还是旧状态。

错误示例：

catalogueResponse.set('key', 'value');
setCatalogueResponse(catalogueResponse);

解决：
每次更新都创建新Map实例：

// API填充数据时
const getCategoryList = async () => {
  const apiData = await fetchData();
  const newMap = new Map();
  apiData.forEach(item => newMap.set(item.id, item));
  setCatalogueResponse(newMap);
};

// 更新值时
const updateCatalogueValue = (key, value) => {
  setCatalogueResponse(prev => new Map(prev).set(key, value));
};

子组件调用时API数据尚未加载完成

如果子组件在父组件API请求完成前就调用updateCatalogueValue，此时catalogueResponse还未被填充，size自然为0。

解决：

父组件判断数据加载完成后再渲染子组件：

{catalogueResponse.size > 0 && <Child updateCatalogue={updateCatalogueValue} />}

或在更新函数中处理空Map场景：

const updateCatalogueValue = (key, value) => {
  setCatalogueResponse(prev => {
    const newMap = new Map(prev);
    newMap.set(key, value);
    return newMap;
  });
};