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

DaiQiangReal commented 2 years ago

Is there an existing issue for this?

[X] 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 commented 2 years ago

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

linjunc commented 2 years ago

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

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 字段？或者还有什么办法咩？