解决vue中Error in render: “TypeError: Cannot read property ‘avatar‘ of undefined“

前端渲染避免undefined错误处理

最新推荐文章于 2025-07-24 09:27:50 发布

原创最新推荐文章于 2025-07-24 09:27:50 发布 · 9.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

本文主要探讨了前端开发中遇到的一个常见问题：在尝试渲染从后端获取的数据时，由于数据异步加载导致的`TypeError: Cannot read property 'avatar' of undefined`错误。作者分析了问题的原因，并提出了两种解决方案：使用v-if条件渲染和预先定义数据结构。这两种方法各有优劣，开发者可以根据实际情况选择合适的方法来避免此类错误。

前言：

很多前端的入门小白经常遇到,明明已经从后端获取数据并前端接收到数据了但是渲染数据的时候老是报某个字段undefined ,本人也是小白一名所以记录自己结合网上解决的方案总结一下

问题描述：

例如:这是我们后端返回的数据:

postInfo:{
      "id": 120,
      "userInfo": {
        "uid": 23,
        "nickname": "好好好",
        "avatar": "http://qny.ztit.cc/c0be2a2f27734986ad4906bd8a2c4a8e.png",
        "sex": "0",
        "phone": "18074900125",
        "birthday": "2010-06-01",
        "gradeId": 1,
        "beated": false
      }
    }

前端定义: postInfo:null 接送收在页面渲染数据后报错

Error in render: "TypeError: Cannot read property 'avatar' of undefined"

原因分析：

我们从后端获取的数据是一个异步请求的异步数据所以前端在渲染前只初始数据postInfo第一层数据而userInfo第二层的数据还是null,也就是说 postInfo.userInfo 为null 所以会报TypeError: Cannot read property 'avatar' of undefined

解决方案：

目前有两种解决的方案:

第一种方案

<image v-if="postInfo.userInfo"  :src="postInfo.userInfo.avatar" />

在数据挂在前用v-if判断数据是否存在在进行渲染,但是这个方法有一个缺点就是,当你有很多地方用到第二层数据时候就要多处进行判断同时对会页面加载性能有影响

第二种方案

postInfo: { 
		   userInfo: {},
		  }

前端定义与后端返回的多层结构来接收数据