React组件删除异常：删除指定项时总是同时删除第一项

我一眼就发现了问题的核心：你在渲染标签列表时，用数组索引作为了React元素的key，这正是导致删除异常的根源。

为什么会出现这种奇怪的删除行为？ #

React靠key来识别列表元素的唯一性，以此精准更新DOM。当用索引做key时，数组元素删除后，后续元素的索引会发生偏移：

• 初始数组：["标签1", "标签2", "标签3"]，对应key是0,1,2
• 删除索引1的"标签2"后，数组变成["标签1", "标签3"]，此时"标签3"的key变成了1

React会误以为原来key=1的元素（"标签2"）被移除，key=2的元素消失了，但实际上是"标签3"顶替了key=1的位置。这种key的混乱会让React的DOM更新逻辑出错，就出现了你看到的“删其他项时连第一项也被删掉”的问题。

具体修复方案 #

方案1：用标签本身作为key（如果标签不会重复）

如果你的标签内容都是唯一的，直接把标签值作为key即可，最简单直接：

// 子组件CustomSearchBox中的渲染部分
let inputTags = (
  tags.map((tag, i) => 
    <li key={tag} style={styles.items}> 
      {tag} 
      <button onClick={() => handleRemoveItem(i)} > (x) </button> 
    </li> 
  )
)

方案2：给标签添加唯一ID（支持重复标签）

如果标签可能重复，就需要给每个标签分配唯一标识，比如用UUID或者时间戳：

1. 先修改父组件的handleSelect方法，给新标签加唯一ID：

// 先安装uuid包：npm install uuid
import { v4 as uuidv4 } from 'uuid';

handleSelect = value => {
  this.setState(prevState => ({
    // 把标签包装成带唯一ID的对象
    tags:[...prevState.tags, { id: uuidv4(), name: value }],
    selected: true // 合并两次setState调用，提升性能
  }));
}

2. 然后修改删除逻辑和子组件的渲染：

// 父组件的handleRemoveItem改成按ID删除
handleRemoveItem = (tagId) => {
  this.setState(state => ({
    tags: state.tags.filter(tag => tag.id !== tagId)
  }));
}

// 子组件CustomSearchBox的渲染部分
let inputTags = (
  tags.map((tag) => 
    <li key={tag.id} style={styles.items}> 
      {tag.name} 
      <button onClick={() => handleRemoveItem(tag.id)} > (x) </button> 
    </li> 
  )
)

额外小优化 #

你原本在handleSelect里连续调用了两次setState，可以合并成一次，减少不必要的组件重渲染，代码也更简洁。

完成这些修改后，再点击每个标签的删除按钮，就只会删除对应的标签，不会再误删第一项了。

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