uni-app HbuilderX 和 微信开发者中工具编译通过 但Vuex中getters计算属性在小程序的页面显示为undefined

问题:

在复习到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函数体只有一行表达式要返回它的结果时,不应该像普通函数那样加大括号,不熟练的时候还是要先写可读性高的代码才好。

猜你喜欢

转载自blog.csdn.net/weixin_43743378/article/details/137249051