Reactjs与Antd实现动态复选框列表删除选中项出现异常

核心原因 #

出现该异常的本质是列表渲染时使用数组索引作为key属性导致的状态错位。React的diff算法会通过key匹配虚拟DOM和真实DOM，当你删除数组某一项后，后续元素的索引会整体前移，React会误认为删除位置后的DOM节点对应之前的旧实例，因此会把旧的选中状态绑定到新位置的选项上，就出现了删了上一项下一项自动选中的问题。

修复方案 #

方案1（推荐）：使用唯一业务ID作为key #

给每个列表项添加全局唯一的标识字段，渲染时直接用该字段作为key，从根源避免diff匹配错误。

// 初始化列表时给每个选项加唯一id
const defaultOptions = [
  { label: "选项1", id: "opt_001" },
  { label: "选项2", id: "opt_002" },
  { label: "选项3", id: "opt_003" }
]

// 渲染复选框时用id作为key和value
<Checkbox.Group value={checkedList}>
  {options.map(item => (
    <Checkbox value={item.id} key={item.id}>
      {item.label}
    </Checkbox>
  ))}
</Checkbox.Group>

// 删除逻辑按id过滤
const handleDelete = () => {
  setOptions(options.filter(item => !checkedList.includes(item.id)))
  setCheckedList([])
}

方案2（临时兼容）：用唯一内容作为key #

如果你的选项内容全局唯一，不需要额外加id字段，可以直接用选项内容作为key和value，也能规避该问题。

// 渲染时用label作为key和value
<Checkbox value={item.label} key={item.label}>
  {item.label}
</Checkbox>

注意：不要在会动态增删、排序的列表渲染中使用数组索引作为key，这是React开发的高频易错点。

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