[Tag] <TagGroup closable 关闭后省略数量指示器仍然不变>

[DaiQiangReal]

Is there an existing issue for this?

• I have searched the existing issues

Which Component

tag

Semi Version

latest

Current Behavior

No response

Expected Behavior

No response

Steps To Reproduce

点击第一个tag 的 x 关闭tag后，还是 +2

ReproducibleCode

import React from 'react';
import { TagGroup } from '@douyinfe/semi-ui';

() => {
    const tagList = [
        { color: 'white', children:'抖音'},
        { color: 'white', children:'火山小视频'},
        { color: 'white', children:'剪映'},
        { color: 'white', children:'皮皮虾'},
    ];
    const src = 'https://sf6-cdn-tos.douyinstatic.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/avatarDemo.jpeg';
    const tagList2 = [
        { color: 'white', children:'Douyin', avatarSrc:src,closable:true},
        { color: 'white', children:'Hotsoon', avatarSrc:src,closable:true},
        { color: 'white', children:'Capcut', avatarSrc:src,closable:true},
        { color: 'white', children:'Pipixia', avatarSrc:src,closable:true},
    ];
    const divStyle = {
        backgroundColor: 'var(--semi-color-fill-0)',
        height: 35,
        width: 300,
        display: 'flex',
        alignItems: 'center',
        padding: '0 10px',
        marginBottom: 30,
    };
    const tagGroupStyle = {
        display: 'flex',
        alignItems: 'center',
        width: 350,
    };
    return (
        <>
        
            <div style={divStyle}>
                <TagGroup
                    maxTagCount={2}
                    style={tagGroupStyle}
                    tagList={tagList2}
                    size='large'
                    avatarShape='circle'
                    showPopover
                />
            </div>
        </>
    );
};

Environment

- OS:
- browser:

Anything else?

No response

[linjunc]

我正在解这个 bug，可以 assign 给我

[linjunc]

遇到一些问题希望得到帮助，在处理这个问题的时候发现了一些问题

• tagGroup 组件没有处理子组件 tag 变化的逻辑，tagList 是一个静态的不是 state，导致了 children 变化，没有 rerender
• 在新增 onClose 触发 tagList state 变更逻辑后，发现还是存在问题，原因是 tagList 生成 Tag 时使用的 key 是 index，导致了 react 在 diff 的时候出错，但是采用随机数作为 key 又会有性能上的损耗（不想这么干）

看到 select 组件也有类似的 tagGroup 使用，Select 组件是通过 option 的 value 作为 key，这样做可以让用户去避免使用相同的 value，以达到 唯一 key 的作用

不知道 Tag 有没有类似的能够作为 key 的，我尝试用 children 作为 key ，但是这不是很合理，或许可以考虑加多一个 value / key 字段？或者还有什么办法咩？

[pointhalo]

不知道 Tag 有没有类似的能够作为 key 的，我尝试用 children 作为 key ，但是这不是很合理，或许可以考虑加多一个 value / key 字段？或者还有什么办法咩？

可以加一个key字段让用户传入，如果不传key，则先判断children类型，如果是string or number降级到用 children （tag的children多为字符串，极少为 reactNode，一般不会有什么问题）
如果children为其他类型，再采用 random key作为兜底

[pointhalo]

v 2.18.0-beta.0 fix，增加 onTagClose 回调，接收回调更新 tagList 以更新数字显示