为什么React未删除指定组件反而删除最后一个同级节点？

问题根因 #

该问题是典型的React列表使用数组索引作为key导致的渲染异常，核心逻辑如下：

• React的虚拟DOM Diff算法更新列表时，会通过key属性判断节点是否可以复用。你当前代码在map渲染子节点时，直接使用循环的childIndex作为key属性值。
• 当你删除索引为2的节点后，原索引3、4的节点会整体前移，对应的索引变为2、3。此时React识别到列表key从原来的0/1/2/3/4变为0/1/2/3，会判定是删除了key=4的节点，直接移除最后一个DOM元素，和你实际删除中间节点的数据操作不匹配，最终出现数据和视图不一致的问题。

解决方案 #

核心思路是给每个节点生成全局唯一的固定标识作为key，替换原有的数组索引：

步骤1：修改新增子节点逻辑，生成唯一标识 #

新增子节点时，给每个节点添加固定唯一的uid字段，可直接用时间戳+随机数实现，也可以用uuid等工具生成：

function addChild() {
  updateChildren([...state.children, {
    uid: Date.now() + Math.random().toString(36).slice(2),
    name: "",
    children: []
  }]);
}

步骤2：修改列表渲染逻辑，替换key为唯一标识 #

渲染子节点时，使用节点自身的uid作为key，同时把原来依赖索引的操作全部改为基于uid判断：

{state.children.map((child) => (
  <li className="child_node" key={child.uid}>
    <Node
      id={child.uid}
      setSelfStateOnParent={(childState) => {
        const updatedChildren = [...state.children];
        // 用uid查找对应节点的位置，不依赖可变的数组索引
        const targetIndex = updatedChildren.findIndex(item => item.uid === child.uid);
        updatedChildren[targetIndex] = { ...childState };
        updateChildren(updatedChildren);
      }}
      removeSelfFromParent={() => {
        // 用uid过滤要删除的节点，不依赖可变的数组索引
        const updatedChildren = state.children.filter(item => item.uid !== child.uid);
        updateChildren(updatedChildren);
      }}
    />
  </li>
))}

可选优化 #

如果需要展示节点的顺序编号，可以在渲染时单独计算序号，不要将展示序号和节点唯一标识绑定。

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