【填坑日记】<transition-group> children must be keyed: <ElTag>

写项目的时候，自己测试没有问题。联调的时候发现的。 一个页面点击每个下拉框选择的时候，都会报这个错的。

查找自己写的每个下拉框发现都给了：key值。自己mock测试的时候也没有什么问题。

segmentfault.com/q/101000000… blog.csdn.net/wangwangwan…

然后挨着检索，发现实际清空是从接口拿到的数据是 22,12,23 这种形式，自己要经过转义成数值形式的数组才可以使用。自己拿到的数据是 ,33 这种形式的。转义出来的数组是 [null,33]。等于给了 key一个空值，所以报错。 说明过滤不够严谨啊。然后完善下转义函数。

strToArrayForId(_str){
    return _str.split(',').map(item=>parseInt(item)).filter(item=>!isNaN(item));
},
复制代码

问题完美解决。

这里发现 element控件只要有一个控件出现缺少key值的情况，页面里面所有的key都会报错的。 另外一个坑。过滤空值的时候使用 !=null !=NaN 都没有解决。 忘了一个属性，NaN是不是空，甚至不等于自身。只能通过 isNaN来进行判断。罪过罪过！