删一个却少俩：Antd Tag 多节点同时消失的原因

删一个却少俩：Antd Tag 多节点同时消失的原因

需求

一个表单的小需求，能填写多个福利，最多十个，福利名称允许重复，和官方的动态添加和删除示例交互一模一样，只是官方示例不支持 tag 内容重复，使用的 tag 内容作为 key

我复制丢给 AI，下掉去重，限制个数，好！满足需求了，key 值怎么办不能用重复的，拼个索引吧，最后主要代码如下，

反问一下：你觉得这会有什么问题，能达到删一个少俩的效果吗🤔？？？

问题

大家应该都知道用 index 作为 key，会有一些问题，对于我这个需求的影响是，点击第一个福利删除操作，实际移除的是最后一个福利的节点，我觉得在这个需求是可以接受的，在没有动画前提下也体感不到，所以我并没有改这个代码。

但是实际测试的效果的是，最后一个福利的节点没了，第一个福利节点也没了，我！！！

这啥情况，这不对呀，根据 React Diff 算法的原理吧啦吧啦...他不应该是这样然后...他咋能...

原因

开始 debug，打开控制台 command + shif + p，搜索并进入 react-dom.development.js 文件，搜索 reconcileChildrenArray 方法，打上断点

React Diff 的处理也没问题呀，被标记删除的是最后一个节点，第一个节点也被正确复用了，什么情况？难道后面的代码出了问题，我就讲断点就放到了 commitRoot 方法，先看了 root.finishedWork 发现也是正确的，后面继续执行了几下，想找出问题出在哪...就突然觉的这个福利节点是不是真没被删除，但是被隐藏掉了，我就切换到了元素控制台，还真是我去！！！这为啥多了个 ant-tag-hidden 的类

看了下 Antd Tag 代码，还真有这个设计，给被移除项加 ant-tag-hidden，加上索引 key 复用导致出现"多节点同时消失"