React组件绑定数组对象异常：关闭应用后组件错乱的解决方法

你遇到的问题核心是用数组索引作为React组件的key，React会通过key识别组件实例，当数组元素被删除时，后续元素的索引会前移，导致React误判为同一个组件，从而复用原有实例，引发状态混乱。

最优解决方案：使用唯一标识作为key #

完全不需要把组件转为类组件，只需要给每个AppConfig对象添加唯一ID，用这个ID作为组件的key即可。React会根据唯一key区分不同组件实例，删除某个条目后，其他组件的key不变，自然会保留原有实例。

具体步骤：

1. 给每个App配置添加唯一ID
   可以用自增ID、UUID或其他生成唯一值的方式，示例如下：

   const [openedAppConfigs, setOpenedAppConfigs] = useState<AppConfigType[]>([
       { id: 1, applicationTitle: "Application Title 1", zIndex: 1 },
       { id: 2, applicationTitle: "Application Title 2", zIndex: 2 },
       { id: 3, applicationTitle: "Application Title 3", zIndex: 3 },
     ]);
   

   动态创建App时，每次新增生成一个新的唯一ID即可（比如用Date.now()或第三方库生成UUID）。

2. 用唯一ID作为组件的key
   修改map渲染代码，将key={i}替换为key={appConfig.id}：

   {
     openedAppConfigs.map((appConfig) => (
       <App key={appConfig.id} zIndex={appConfig.zIndex} 
            applicationTitle={appConfig.applicationTitle}
            ...moreProps >
         <div />
       </App>
     ))
   }
   

3. 关闭App时根据ID删除对应条目
   示例关闭函数：

   const closeApp = (targetId: number) => {
     setOpenedAppConfigs(prev => prev.filter(config => config.id !== targetId));
   };
   

关于类组件存实例的方案 #

这个方案完全没必要，反而会增加复杂度。React函数组件配合正确的key已经能很好地管理组件实例，类组件的实例管理需要手动维护，不符合React的声明式编程模型，容易引入bug。

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