已解决:TypeError: Cannot read properties of undefined (reading ‘name‘ )

文章介绍了在Vue项目中遇到的TypeError,该错误发生在尝试访问未定义对象的属性时。解决方案在于正确处理接口返回的数据,特别是在遍历和赋值过程中。作者发现由于直接向数组添加对象导致的问题,修正方法是先创建一个新的对象,然后将处理后的数据放入对象,最后使用push方法将对象添加到数组末尾。
摘要由CSDN通过智能技术生成

错误描述

TypeError: Cannot read properties of undefined (reading ‘name‘ )

  1. 这个错误在前端中蛮常见的,一般都是提示的这个属性没写对,但是呢,如果仅仅是这么一个简单的错误,也没必要特意写个博客记录一下
  2. 这个错误呢,最常见的解决方式就是查看他提示这个“name”,看看哪个地方写错了

解决方案

  1. 我是在对接口返回值做处理的时候遇到的,简单的来说,就是我需要对接口返回的某个值做处理,如下所示:

    viewResults(row.id).then(response => {
       console.log(response)
       for (var i = 1; i < response.data.list.length; i++) {
         if (response.data.list[i - 1].score[3] == response.data.list[i - 1].score[4]) {
           this.gridData[i].name = response.data.list[i - 1].name
           this.gridData[i].catename = response.data.list[i - 1].catename
           this.gridData[i].score = response.data.list[i - 1].score.substring(0, 6)
         } else {
           this.gridData[i].name = response.data.list[i - 1].name
           this.gridData[i].catename = response.data.list[i - 1].catename
           this.gridData[i].score = response.data.list[i - 1].score.substring(0, 5)
         }
       }
     })
    
  2. 具体id错误原因是这样的,vue给对象数组添加对象时for循环只执行一次(我在data中手中加了一个对象,所以只执行了一次),这个其实就是赋值产生的问题,所以上面这么写是错的,正确写法如下所示:

    viewResults(row.id).then(response => {
       for(var i = 1;i<response.data.list.length;i++){
         let obj ={};
         if(response.data.list[i-1].score[3] == response.data.list[i-1].score[4]){
           obj.name = response.data.list[i-1].name
           obj.catename = response.data.list[i-1].catename
           obj.score = response.data.list[i-1].score.substring(0,6)
           }else{
             obj.name = response.data.list[i-1].name
             obj.catename = response.data.list[i-1].catename
             obj.score = response.data.list[i-1].score.substring(0,5)
           }
           this.gridData.push(obj)
       }
     })
    

PS:push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。新元素将添加在数组的末尾。此方法改变数组的长度。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值