ReactJS动态添加组件删除异常：点击删除时下方组件全被移除

核心问题是你把React组件（JSX）直接存在了状态examSections里，这违反了React状态管理的基本原则——状态应该存储纯数据，而非UI元素。这种做法会导致组件渲染逻辑混乱，删除操作时出现不可预测的批量删除问题，同时闭包陷阱也可能让你拿到旧的状态值。

修复步骤 #

1. 重构状态，只存纯数据

修改添加函数，不再往状态里塞JSX，只存储每个section的唯一标识（uuid）：

const onClickAddExamSection = () => {
  const uuid = getUniqueId();
  // 使用函数式更新确保拿到最新状态
  setExamSections(prevSections => [...prevSections, { index: uuid }]);
};

2. 动态渲染组件，而非直接存状态

在渲染区域，遍历纯数据状态，动态生成ScheduleExamSection组件：

{examSections.map(section => (
  <ScheduleExamSection
    key={section.index}
    className='row mt-4'
    index={section.index}
    onClickRemoveSection={onClickRemoveSection}
  />
))}

3. 优化删除函数，避免闭包陷阱

改用函数式更新获取最新状态，确保删除逻辑基于当前最新的examSections：

const onClickRemoveSection = (targetIndex) => {
  setExamSections(prevSections => 
    prevSections.filter(section => section.index !== targetIndex)
  );
};

4. 保留子组件的删除逻辑不变

子组件ScheduleExamSection里的删除按钮代码可以保持原样，确保传递的index是正确的uuid即可。

为什么原来的代码会出问题 #

• 把JSX存在状态里，React无法正确跟踪组件实例的身份，即使加了key，也会因为状态中存储的是组件本身，导致重新渲染时实例混乱，触发批量删除。
• 直接使用const data = [...examSections]可能因为闭包陷阱拿到旧的状态值，导致删除逻辑基于过时的数据执行，出现异常。

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