React中useEffect外Map为空求助：赋值后无法读取数据

你直接在组件顶层声明的catmap是普通变量，并非React的状态或引用类型。React组件每次重新渲染（比如categoryIds变化触发重渲染），都会从头执行组件函数，const catmap = new Map();会重新执行，创建一个全新的空Map——这个新Map和第一个useEffect里填充数据的那个Map完全是两个不同的引用，所以第二个useEffect里访问的是新的空Map，自然打印为空。

用useRef来保存这个Map，因为useRef的.current属性在组件整个生命周期内都会保持同一个引用，不会随组件重渲染而重置：

import { useEffect, useRef, useState } from 'react';

// ...其他组件代码

const catmapRef = useRef(new Map()); // 用useRef保存Map实例

useEffect(() => {
  // 获取分类数据
  getCategories().then((res) => {
    setCategories(res.data);
    const catmap = catmapRef.current;
    catmap.clear(); // 先清空避免重复添加数据
    res.data.forEach((c) => {
      catmap.set(c._id, c.name);
    });
    console.log("mycate len", catmap);  // 正常显示映射后的数据
    console.log("mycate len", catmap.size);  // 显示正确的size值
  }); 
}, []);

useEffect(() => {
  let currentUrlParams = new URLSearchParams(window.location.search);
  const catmap = catmapRef.current;
  console.log("mycate len", catmap); 
  console.log("mycate len", catmap.size); // 现在能拿到正确的Map和size
}, [categoryIds]);

如果你的业务场景需要Map变化时触发组件重渲染，也可以用useState存储Map，但仅用于数据映射、不需要触发重渲染的场景下，useRef的性能更优。

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