为何React中多个Area组件实例的useState状态会共享？

问题原因 #

你在menuInfos数组中直接静态创建了<Area /> React元素对象，这些对象是在组件外部初始化的全局固定引用。当Menu组件切换菜单项时，React的虚拟DOM diff算法会基于元素类型、key（未指定时用索引）判断组件实例是否复用：由于这些提前创建的元素引用固定，React会判定它们为同一个组件实例，导致状态不会重新初始化，而是复用之前的状态，最终出现多个实例共享count的异常。

即便你验证了组件卸载正常、menuInfos中的子组件是不同对象，也无法改变React对组件实例复用的判定逻辑——因为React判断实例身份的核心依据是元素的类型、key和props，而非对象引用是否唯一。

解决方案 #

方案1：动态渲染组件（推荐） #

不要在menuInfos中直接存储已实例化的React元素，改为存储渲染函数或组件信息，在Menu组件内部动态创建Area实例：

// 修改menuInfos为渲染函数集合
const menuInfos = [
  { title: "aaaaaa", render: () => <Area title="aaaaaa" /> },
  { title: "bbbbbb", render: () => <Area title="bbbbbb" /> },
  { title: "cccccc", render: () => <Area title="cccccc" /> },
  { title: "dddddd", render: () => <Area title="dddddd" /> },
  { title: "eeeeee", render: () => <Area title="eeeeee" /> }
];

// 在Menu组件中渲染时调用render函数
// 假设当前选中项为currentMenu
<div>{currentMenu.render()}</div>

每次调用render()都会生成新的React元素，React会识别为独立组件实例，状态自然隔离。

方案2：为组件指定唯一key #

如果必须在menuInfos中存储已实例化的元素，给每个Area组件添加唯一的key属性，让React能区分不同实例：

const menuInfos = [
  { title: "aaaaaa", children: <Area key="area-aaaaaa" title="aaaaaa" /> },
  { title: "bbbbbb", children: <Area key="area-bbbbbb" title="bbbbbb" /> },
  { title: "cccccc", children: <Area key="area-cccccc" title="cccccc" /> },
  { title: "dddddd", children: <Area key="area-dddddd" title="dddddd" /> },
  { title: "eeeeee", children: <Area key="area-eeeeee" title="eeeeee" /> }
];

React会根据key判断组件实例身份，切换菜单项时会销毁旧实例、创建新实例，状态不会共享。

方案3：状态提升（按需选择） #

若业务需要保留不同菜单项的count状态，可将count状态提升到Menu组件，通过props传递给Area：

// Menu组件中管理状态
function Menu() {
  const [countMap, setCountMap] = useState({});

  const handleCountChange = (title) => {
    setCountMap(prev => ({
      ...prev,
      [title]: (prev[title] || 0) + 1
    }));
  };

  const menuInfos = [
    { title: "aaaaaa", children: <Area title="aaaaaa" count={countMap["aaaaaa"] || 0} onCountChange={() => handleCountChange("aaaaaa")} /> },
    // ...其他项
  ];

  // 渲染逻辑
}

// 修改Area组件为受控组件
function Area({ title, count, onCountChange }) {
  return (
    <div>
      <h2>current area : {title}</h2>
      <div>
        <button type="button" onClick={onCountChange}>
          +1
        </button>
        <div>count : {count}</div>
      </div>
    </div>
  );
}

这种方式将状态统一管理在父组件，每个菜单项的count独立存储，切换时可保留各自状态。

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