这个问题其实是典型的useEffect依赖项设置不当导致的无限循环，我来帮你拆解一下原因和解决办法：

问题根源 #

你的useEffect依赖数组里写了properties状态，但每次在useEffect内部调用setPropertiesMapFunc时，都会更新这个状态。由于每次赋值的都是新的Map实例（哪怕内容和之前完全一致，引用地址也不同），React会判定properties发生了变化，从而再次触发useEffect。这样就形成了「useEffect更新状态 → 状态变化触发重渲染 → 重渲染后useEffect因依赖变化再次执行」的无限循环。

修复方案 #

我们需要调整两个地方来解决这个问题：

1. 把常量Map移到组件外部 #

目前你在组件内部定义了propertiesMap1和propertiesMap2，这会导致每次组件渲染时都会重新创建这两个Map实例，既浪费内存也没必要。把它们移到组件外面，作为全局常量，只会被初始化一次：

// 移到组件定义之外，作为全局常量
const propertiesMap1 = new Map([/* 你的原有结构 */]);
const propertiesMap2 = new Map([
  ["TITLE4", { propertyValues: { myProperty10 : "myVal1", myProperty11 : "myVal2", myProperty12 : "myVal3", }, isOpen: true } ],
  ["TITLE5", { propertyValues: { myProperty13 : "myVal4", myProperty14 : "myVal5", myProperty15 : "myVal6", }, isOpen: true } ],
  ["TITLE6", { propertyValues:{ myProperty16 : "myVal7", myProperty17 : "myVal8", myProperty18 : "myVal9", }, isOpen: true } ]
]);

function YourComponent(props) {
  // 组件内部逻辑...
}

2. 修正useEffect的依赖数组 #

你的核心逻辑是根据URL参数id来切换对应的Map，所以useEffect应该监听的是props.match.params.id的变化，而不是properties状态本身。修改后的useEffect如下：

const [properties, setPropertiesMapFunc] = useState(new Map());

useEffect(()=> {
  const mapNum = Number(props.match.params.id);
  // 根据id选择对应的Map
  const targetMap = mapNum === 1 ? propertiesMap1 : propertiesMap2;
  setPropertiesMapFunc(targetMap);
}, [props.match.params.id]); // 仅当id变化时才执行

这样调整后，只有当URL参数id发生变化时，useEffect才会触发并更新properties状态，彻底打破无限循环的链条。

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