问题:
在复习到uni-app项目计算购物车选中商品总价时,开发工具编译都通过,但是购物车页面显示undefined,看了半天自己写的表达式逻辑,硬是没找到问题所在,尝试问了AI,AI回答的也逐渐离谱
问题截图:
Vuex中的计算选中商品总价的代码段逻辑如下:
getters:{
//计算选中商品总价
totalSelectedGoodsPrice(state){
return state.cart.filter(item=>item.goods_state).reduce((currentVal,filtItem)=>{
currentVal+= filtItem.goods_num*filtItem.goods_price},0)
}
}
代码段逻辑分析:
通过调用该文件仓库中的state对象里的购物车属性(数组),使用filter过滤器筛选购物车中每一项选中状态为真的值并返回为一个新数组,之后再使用求和函数reduce,赋予初始值0给currentVal,遍历刚刚筛选出的新数组,每一项值为filtItem,通过filtItem身上的属性叠加计算每一项选中商品的总价,最后返回给计算属性totalSelectedGoodsPrice
问题分析:
1.其实通过代码段逻辑的分析,我始终觉得我的逻辑应该没有大的问题,但重启重编译清缓存就是无效。
2.尝试使用AI辅助解答,AI夸我没问题,但是页面还是有问题啊,我又问了它一遍确认没问题吗,它居然最后来了这么一段:
后面它一直陷入死循环,直到…
好吧,这下真的人傻了,不过当时也是又气又乐(文心一言,出院!)
3.AI也靠不住,只好继续自己分析了,后面我想再确认下是否是这个计算属性的问题,于是返回了一个固定值给计算属性,结果页面显示正常。
4.那问题还是出在上面这一个代码段中,那为什么会显示undefined呢,我的逻辑应该没问题啊?
原因
后面找了半天资料,还是不知所措,最后只能查看项目文档,看它的逻辑和我写的一样,运行结果居然是正常的,
代码段如下:
//计算选中商品总价
totalSelectedGoodsPrice(state){
return state.cart.filter(item=>item.goods_state).reduce((currentVal,filtItem)=>currentVal+= filtItem.goods_num*filtItem.goods_price,0)
}
后面看了半天,终于发现了,原来它的reduce函数体的表示外层没有{}大括号,其他代码逻辑和我没有区别,至少本意上没有区别…那么到这儿,这个编译无异常,但是计算属性在页面显示undefined的问题算是解决了。
总结:
本次遇到的问题,还是对于es6箭头函数语法不熟练所导致的。在reduce函数体只有一行表达式要返回它的结果时,不应该像普通函数那样加大括号,不熟练的时候还是要先写可读性高的代码才好。