React中Antd Tag组件关闭单个标签时其他标签异常隐藏的解决方法

你的问题核心是使用数组索引作为Tag组件的key，导致React的DOM diff算法错误复用了已关闭Tag的状态。

问题原因 #

当删除apple标签后，原数组['apple','mango']变为['mango']，此时mango对应的索引从1变成0。React会认为索引0的组件是之前的apple标签组件，而Antd的Tag触发关闭后会添加隐藏样式，复用后mango标签继承了这个隐藏状态，看起来就像被隐藏了。

解决方案 #

将Tag的key从index替换为标签的实际值e（你的标签值都是唯一字符串，适合作为唯一标识），这样React能准确识别每个Tag组件，不会错误复用状态。

修改后的代码：

const onHandleCloseTags = (e) => {
  // event for onClose for Tags
  var array = [...tags]; // 复制数组保证不可变性
  var index = array.indexOf(e);
  if (index !== -1) {
    array.splice(index, 1);
    console.log("slicing: ",array);
    setTags(array);
  }
}

return(
  <>
    {tags.map((e) => (
      <Tag
        closable
        key={e} // 使用标签值作为唯一key，替代索引
        onClose={() => onHandleCloseTags(e)}
      >
        {e}
        {console.count("re-rendering")}
      </Tag>
    ))}
  </>
)

补充说明 #

• React中key的核心要求是唯一且稳定的标识，数组索引仅在元素顺序不会改变时适用，涉及删除/插入操作时，必须使用业务上唯一的标识（比如这里的标签值）。
• 你之前复制数组的做法是正确的，保证了状态更新的不可变性，问题根源不在数组复制，而是key的错误使用。

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