[Vue warn]: Error in render: “TypeError: data.reduce is not a function“报错详解
大家好,我是小梅,公众号:「小梅的前端之路」 原创作者。作为在前端领域不断探索的一员,在此记录开发中遇到的问题,如果你也遇到了相同的问题,希望本文对你有帮助。一、问题定位:打开开发者工具,点开错误的那个小三角,便能看到详细信息,定位到错误发生在哪个文件的哪一行。我的项目使用Element-UI组件进行开发,clDetailList是用于给el-table的data属性赋值的。clDetailLis
·
大家好,我是小梅,公众号:「小梅的前端之路」 原创作者。
作为在前端领域不断探索的一员,在此记录开发中遇到的问题,如果你也遇到了相同的问题,希望本文对你有帮助。
一、问题定位:
打开开发者工具,点开错误的那个小三角,便能看到详细信息,定位到错误发生在哪个文件的哪一行。
项目使用Element-UI组件进行开发,clDetailList是用于给el-table的data属性赋值的。clDetailList按照预期得是Array类型的,问题就出在push函数执行完之后返回的是数组的长度,并不是我预期的数组;因此,clDetailList的值永远都是1,这也是为啥开发者工具中一直有下图这个错误。
二、解决问题
对JS数组相关方法的返回值的不清楚导致出现了这次的bug,因此在这里总结一下JS各个操作数组函数的返回值,数组相关的其他方法在这篇文章里写了,因此就不废话了。JS数组相关方法区分
函数名称 | 返回值 | 示例 |
push | 改变原数组,返回原数组新的长度 | let a1 = [1] const b1 = a1.push(233) console.log(a1, b1) // [1,233] 2 |
concat | 不改变原数组,返回一个新的数组 | let a = [1] const b = a.concat(233) console.log(a, b) // [1] [1,233] |
三、总结
如果有小伙伴遇到了同样错误的,可以看一下是不是数据赋值出现了啥问题。
❤️欢迎素质三连[点赞 + 收藏 + 评论]
我是小梅,有兴趣的话可以在微信搜一搜「小梅的前端之路」第一时间接收文章更新通知,一起沟通、学习成长呀。
更多推荐
已为社区贡献5条内容
所有评论(0)