如何让同一组件多实例的useState不共享状态？无需Math.random()设key

首先要明确两个核心事实：

1. React组件的每个实例天生就该拥有独立的useState状态，出现状态共享的问题，本质是你给多个组件实例设置了重复的key，或是错误复用了组件标识。
2. 你示例里的useState("activated", () => false)写法是错误的——useState的第一个参数是状态初始值，不是状态的"名字"，React完全不会用这个字符串区分状态，它是靠Hook的调用顺序来关联对应状态的。

正确的解决方案 #

不需要用Math.random()这种不稳定的方式生成key，只要给每个组件实例分配稳定且唯一的key即可：

• 列表场景：用业务数据自带的唯一标识符（比如后端返回的id）作为key：

{userList.map(user => (
  <UserCard key={user.id} user={user} />
))}

这里每个UserCard实例的useState状态会完全独立，不会互相干扰。

• 手动渲染多个组件：给每个组件分配固定的唯一key：

<SettingsPanel key="general-settings" />
<SettingsPanel key="privacy-settings" />
<SettingsPanel key="notification-settings" />

只要key不重复，每个SettingsPanel的状态就会各自独立维护。

关键原理 #

React通过组件的类型+key来识别不同的组件实例，只要这两个组合唯一，React就会为每个实例创建独立的状态环境，useState自然会隔离状态。根本不需要给useState加额外的"标识参数"，那是对API的误解。

内容的提问来源于stack exchange，提问作者Jan Veselý