React 之 Ant Design删除单个Tag时，多个Tag

问题描述

如下三个标签，将锦鲤标签删除后，紧接着访问接口获取最新的列表数据，会发现列表中只显示一个Tag。
查看元素发现实际上应该显示两个Tag，只是其中一个Tag被隐藏了。
更有意思的是，如果每次只是删除最后一个Tag，并不会出现多个Tag消失的问题。

image.png
image.png

原因：对于列表类型的标签，例如Table、Tag，以及开关类型的标签，例如Switch，要避免数据显示异常的话，都要设置标识，最好用id来给key赋值，用index有时候也会出现异常

image.png

问题代码：

用index1来给key赋值，不一定具有唯一性,仍会出现上述问题。key={index1}

 render() {
    const tba = this.state.Dates.map((item, index) => {
      var list = [];
      item.utagStoreDrawList.map((item1, index1) => {
        list.push(
          <Tag
          style={{marginTop:'3px'}}
            color="volcano"
            closable
            onClose={(e) => {
              this.preventDefault(item1.id);
            }}
            key={index1}
          >
            {item1.utagName}
          </Tag>
        );
      });
    });
  }

正确代码：

用id来给key赋值，具有唯一性,可以解决上述问题。key={item1.id}

 render() {
    const tba = this.state.Dates.map((item, index) => {
      var list = [];
      item.utagStoreDrawList.map((item1, index1) => {
        list.push(
          <Tag
          style={{marginTop:'3px'}}
            color="volcano"
            closable
            onClose={(e) => {
              this.preventDefault(item1.id);
            }}
            key={item1.id}
          >
            {item1.utagName}
          </Tag>
        );
      });
    });
  }