React组件列表删除异常：删除首个组件致后续组件消失

核心错误操作 #

• 使用列表长度作为组件的key和id：你用当前列表长度生成新组件的id和key，这是不稳定的标识。比如初始列表为空，添加第一个组件时id=0；再添加第二个id=1。如果删除第一个组件，剩余列表长度变回1，此时原第二个组件的索引变成0，但它的key还是1——React的diff算法会认为原来的key=1组件被移除，key=0是新组件，进而错误卸载所有旧组件，导致全部消失。key需要是稳定、唯一、不随列表变化而改变的值，不能依赖动态变化的长度或索引。
• 删除函数未采用函数式更新state：你的deleteNewCollectorFields里直接访问collectorsList，但React组件每次渲染时的state都是一个快照，闭包会捕获这个快照。当你多次添加组件后，删除函数里的collectorsList还是最初渲染时的旧值，不是最新的状态，导致过滤后得到错误的列表，甚至清空。

对React state的理解误区 #

• 误区1：认为state变量是“实时同步”的。实际上，组件每次渲染的state都是独立的快照，异步触发的函数（比如点击事件）会捕获当前渲染周期的state快照，后续state更新后，这个函数里的state还是旧值。
• 误区2：把索引/列表长度当作合法的key。key的作用是让React精准识别每个组件的身份，一旦key变化，React会销毁旧组件并创建新组件，而非更新现有组件，这会引发不必要的重渲染甚至状态丢失。

修复代码示例 #

import { useState } from 'react';

function CollectorsComponent() {
  // 用独立计数器生成唯一id，避免依赖列表长度
  const [idCounter, setIdCounter] = useState(0);
  const [collectorsList, setCollectorsList] = useState([]);

  // 添加组件：用函数式更新获取最新列表，同时自增计数器
  const insertNewCollectorFields = () => {
    setCollectorsList(prevList => [
      ...prevList,
      { id: idCounter, text: "New Item" }
    ]);
    setIdCounter(prev => prev + 1);
  };

  // 删除组件：用函数式更新拿到最新的state快照，通过id过滤
  const deleteNewCollectorFields = (itemId) => {
    setCollectorsList(prevList => prevList.filter(item => item.id !== itemId));
  };

  return (
    <div>
      <button onClick={insertNewCollectorFields}>添加组件</button>
      {collectorsList.map(item => (
        <div key={item.id} style={{ margin: '8px 0' }}>
          <span>{item.text}</span>
          <button onClick={() => deleteNewCollectorFields(item.id)} style={{ marginLeft: '8px' }}>删除</button>
        </div>
      ))}
    </div>
  );
}

export default CollectorsComponent;

修复要点说明 #

1. 用独立的idCounter生成唯一id，保证每个组件的id不会随列表增删而变化，key稳定可靠。
2. 增删操作都使用函数式更新（prevList => ...），确保每次更新都基于最新的state快照，避免闭包捕获旧state的问题。

内容的提问来源于stack exchange，提问作者M. Abdel-Ghani