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

最新推荐文章于 2024-03-23 08:41:38 发布

weixin_33768481

最新推荐文章于 2024-03-23 08:41:38 发布

阅读量3.8k

点赞数 2

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5b72a3dce51d4566590c686f

版权

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

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

然后挨着检索，发现实际清空是从接口拿到的数据是 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来进行判断。罪过罪过！

关注