Antd中tag组件删除一个导致删除多个

在做查询的时候使用tag做显示选中的多项值，如下图所示：

当某一个查询字段支持多个值查询的时候，需要显示用户选择了那些查询条件。当然，需要支持用户删除已选择的某个条件值。发现：但当删除的时候，本来选择四个值，删除其中的一个会导致多删除一个，一般是删除中间的某一个，会导致同时删除两个。

当通过debug的形式去查看元素的时候发现删除是一个值，剩下三个，可是在页面上却只显示两个，表单中的数据确实正常的：

而打印的结果也是三个：

<span>{type}：{map(names, obj => {
  console.log("obj", obj)
  return <Tag color="gray" name={obj.name} closable={true} onClose={() => onClose(obj)}>{obj.name}</Tag>
})}</span>

而通过页面元素，也确实是三个原色节点

注意，其中一个是不显示的，样式为：

为什么会将这个元素隐藏掉呢？而不隐藏其他的元素呢？

这让我想到之前的在操作select的时候，如果select中的option选项存在key值一样的，将会导致选择后会同时被选中。就像你使用table组件时不给设定rowkey那么，你点击一个就会选择全部，而这里并不是删除全部，只是将另外一个元素隐藏了。

给tag加上唯一key后发现，一切正常了。

删除其中一个，表单中只留下未删除的三个，而查询条件中也只保留了三个未删除的，这是正常的结果。

那么问题来了，为什么不是将其他的元素都隐藏了呢？

我们知道：React 在DOM渲染的时候，会生成一个虚拟DOM树，而为每个DOM节点绑定key值，可以在使用Diff算法时更快的查找到所需要的渲染的DOM节点，到达渲染优化的目的。

而antd是基于react或者说是专为React量身打造的UI组件库，那么它自然会遵循react的一些规则，比如我们在table组件中会看到这么一段话：

从描述中可以看得出来，如果你没有设定唯一的key值，会出现各类无法解释的奇怪现象。也就是说，错误可能是随机的。

据我使用几年的react和antd来看，主要有这么几种错误，几乎都表现在数组类的数据中：

1. table：如果不设置key，会出现选择某一行，导致全部选中所有行数据。
2. select：如果设置两个相同的key，将会导致滑轮滚动时，数据会变成重复的数据，比如第一个是所以，那么你滚轮每滚动一次，第二个就会变成和第一个样的数据，如此重复，所有的数据就都会变成同一个数据。
3. tag：如果不设置key值，那么就会出现删除某一个数据，将导致其他的某一个或者某几个数据变成隐藏。

既然是无法预知的问题，那么我们在使用map遍历生成DOM节点的时候，就需要严格遵守标准，给每一个遍历节点添加唯一的key，以避免类似的问题。这个问题话了我个把小时去定位。希望大家别犯类似的问题。