取个对象值导致系统崩溃

取个对象值导致系统崩溃

前言

想必各位小伙经常在项目中遇到一些错误,取对象值的时候,经常报错,又或者某些项目突然就经常都是出现在一些对象取值上面,然后就被领导一顿训斥

image-20230812094958371

报错分析

例如: 下面这个报错大家想必不会陌生,就是读取不存在对象的变量

Uncaught TypeError: Cannot read properties of undefined (reading 'b')

那么为什么我们会遇到这个问题呢?

下面复现以下场景

假设: 服务端给我们返回一个列表数据,如下

[{title: '新闻信息1',info: {content: '新闻内容1',createTime: '2023-8-12 09:54:42'}},{title: '新闻信息2',info: {content: '新闻内容2',createTime: '2023-8-12 09:54:42'}},{title: '新闻信息3',info: {content: '新闻内容3',createTime: '2023-8-12 09:54:42'}}
]

那么前端循环就是这样

<ul><li class="li" v-for="(item, index) in list" :key="index"><div class="title">{{ item.title }}</div><div class="content">{{ item.info.content }}</div></li>
</ul>

目前看是不是没有问题,但是正常情况下也是不会报错

此时我们修改一下,list里的某个数据, 例如: 某个info为 null 或者 undefined

{title: '新闻信息3',info: null
}

那么此时我们就收到报错

image-20230812095912157

这个报错很容易定位,也容易修改,但是要是在线上出现这样子的问题,就是系统崩溃

那么我们应该用什么办法避免这种问题?

解决方案

目前来看这种对象里取属性的场景,在代码开发过程中是很常见的,那么我们写代码有哪几种快捷的方式?来处理这种问题?

第一种 通过 && 判断对象是否存在,在读取值

{{ item.info && item.info.content }} // 先判断 item.info 是否存在  存在则读取content否则不是读取

第二种 v-if 与 第一种方法类似

<div class="content" v-if="item.info">{{ item.info.content }}</div> // 通过v-if判断在info存在再渲染元素

第三种 ?. 可选链运算符 当引用的对象为null或者undefined不会引起报错,返回undefined

第三种也是我最推荐一种,代码量最少,最便捷

<div class="content">{{ item.info?.content }}</div>

目前我能想到的方法就这几种,不知道还有没有更好方式

总结

虽然这种错误不一定是前端的问题,但是代码的健壮性还是很重要的,个人目前也业务中就经常遇到这样子的问题,服务端返回的某些对象在没有值的情况下就是null,所以导致前端代码报错。

都是血的教训,希望大家少遇到这样子的错误

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/37289.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

最大交换(力扣)枚举 JAVA

给定一个非负整数&#xff0c;你至多可以交换一次数字中的任意两位。返回你能得到的最大值。 示例 1 : 输入: 2736 输出: 7236 解释: 交换数字2和数字7。 示例 2 : 输入: 9973 输出: 9973 解释: 不需要交换。 注意: 给定数字的范围是 [0, 10^8] 解题思路&#xff1a; 1、数最…

【量化课程】08_2.深度学习量化策略基础实战

文章目录 1. 深度学习简介2. 常用深度学习模型架构2.1 LSTM 介绍2.2 LSTM在股票预测中的应用 3. 模块分类3.1 卷积层3.2 池化层3.3 全连接层3.4 Dropout层 4. 深度学习模型构建5. 策略实现 1. 深度学习简介 深度学习是模拟人脑进行分析学习的神经网络。 2. 常用深度学习模型架…

山东布谷科技直播软件源码Nginx服务器横向扩展:搭建更稳定的平台服务

在直播软件源码平台中&#xff0c;服务器扮演着重要的角色&#xff0c;关系着视频传输、数据处理、用户管理等工作的顺利完成。随着互联网的迅猛发展&#xff0c;直播行业也随之崛起&#xff0c;全世界的人们都加入到了直播软件源码平台中&#xff0c;用户流量的增加让服务器的…

视频高效剪辑,轻松平均分割视频,生成高质量M3U8

您是否在处理视频剪辑时常常面临繁琐的切分工作&#xff1f;是否希望能够快速而精准地平均分割视频&#xff0c;并生成适用于在线播放的高质量m3u8文件&#xff1f;现在&#xff0c;我们的智能视频剪辑大师为您提供了一种简便而高效的解决方案&#xff01;无需复杂操作&#xf…

Leaflet入门,Leaflet如何实现vue双向绑定数据添加到图片标记物到地图上,动态根据vue数据更新到地图上以及鼠标经过标记物显示提示框

前言 本章使用Leaflet的vue2-leaflet或者vue-leaflet插件方式实现vue数据绑定地图数据,实现地图标记物与vue数据的双向联动更新,以及鼠标经过标记物显示提示框功能。 实现效果演示 vue如何使用Leaflet vue2如何使用:《Leaflet入门,如何使用vue2-leaflet实现vue2双向绑定…

【量化课程】02_3.投资学基础概念

文章目录 1. 投资和投资学的关系1.1 什么是投资&#xff1f;1.2 什么是投资学&#xff1f; 2. 投资学的主要内容2.1 金融市场与投资环境2.1.1 金融资产2.1.2 债券市场的意义2.1.3 金融市场与经济2.1.4 投资过程2.1.5 竞争性的市场2.1.6 市场参与者2.1.7 主要的市场债券市场外汇…

Stable Diffusion 插件开发经验

Stable Diffusion近来大热,但是插件开发的资料少之又少。 这里提供一些插件开发的经验,可供参考。 1.替换启动页。 如果你想要在运行Stable Diffusion的基础上想要一些独有的操作,不想要进行裁剪,直接替换启动页面,那么就需要在webui中进行替换 这里modules.ui.create_ui…

基于ipad协议的gewe框架进行微信群组管理(二)

友情链接 geweapi.com 点击访问即可。 获取群组详情 小提示&#xff1a; 该接口可以一次查询20个群组查询出来的信息是不带公告的 请求URL&#xff1a; http://域名地址/api/group/detail 请求方式&#xff1a; POST 请求头&#xff1a; Content-Type&#xff1a;applica…

2009年下半年 软件设计师 上午试卷

博主介绍&#xff1a;✌全网粉丝3W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战&#xff0c;博主也曾写过优秀论文&#xff0c;查重率极低&#xff0c;在这方面有丰富的经验…

【Microsoft 支持】【数据库-MySql】当您尝试从大于 5000 的 TCP 端口连接时收到错误 WSAENOBUFS (10055)

​ 一、转载原文 When you try to connect from TCP ports greater than 5000 you receive the error ‘WSAENOBUFS (10055)’ Symptoms If you try to set up TCP connections from ports that are greater than 5000, the local computer responds with the following WSAE…

如何使用Spark/Flink等分布式计算引擎做网络入侵检测

如何使用Spark/Flink等分布式计算引擎做网络入侵检测 引言16 Distributed Abnormal Behavior Detection Approach Based on Deep Belief Network and Ensemble SVM Using Spark17 Spark configurations to optimize decision tree classification on UNSW-NB1518 A dynamic spa…

SOLIDWORKS PDM—文件版本的管控

SOLIDWORKS产品数据管理 (PDM) 解决方案可帮助您控制设计数据&#xff0c;并且从本质上改进您的团队就产品开发进行管理和协作的方式。使用 SOLIDWORKS PDM Professional&#xff0c;您的团队能够&#xff1a;1. 安全地存储和索引设计数据以实现快速检索&#xff1b;2. 打消关于…

使用QT可视化设计对话框详细步骤与代码

一、创建对话框基本步骤 创建并初始化子窗口部件把子窗口部件放到布局中设置tab键顺序建立信号-槽之间的连接实现对话框中的自定义槽 首先前面三步在这里是通过ui文件里面直接进行的&#xff0c;剩下两步则是通过代码来实现 二、项目创建详细步骤 创建新项目 为项目命名 为…

VScode如何设置中文教程

前言&#xff1a;打开VSCode软件&#xff0c;可以看到刚刚安装的VSCode软件默认使用的是英文语言环境&#xff0c;但网上都是vscode中文界面教你怎么设置中文&#xff0c;可能不利于小白阅读&#xff0c;所以重装vscode&#xff0c;手摸手从英文变成中文。 设置为中文 打开VS…

android app控制ros机器人五(百度地图)

半吊子改安卓&#xff0c;新增了标签页&#xff0c;此标签页需要显示百度地图 按照官方教程注册信息&#xff0c;得到访问应用AK&#xff0c;步骤也可以参照下面csdn Android地图SDK | 百度地图API SDK 【Android】实现百度地图显示_宾有为的博客-CSDN博客 本人使用的是aar开…

Python 图形界面框架TkInter(第八篇:理解pack布局)

前言 tkinter图形用户界面框架提供了3种布局方式&#xff0c;分别是 1、pack 2、grid 3、place 介绍下pack布局方式&#xff0c;这是我们最常用的布局方式&#xff0c;理解了pack布局&#xff0c;绝大多数需求都能满足。 第一次使用pack&#xff08;&#xff09; import …

学习笔记整理-DOM-02-事件监听

一、什么是"事件监听" DOM允许书写JavaScript代码以让HTML元素对事件作出反应什么是"事件": 用户与网页的交互动作当用户点击元素时当鼠标移动到元素上时当文本框的内容被改变时当键盘在文本框中被按下时当网页已加载完毕时… “监听”&#xff0c;顾名思义…

开学季电容笔怎么选?iPad第三方电容笔了解下

不少的学生党开学必备清单里都少不了电容笔&#xff0c;可见其的重要性。自从苹果发布了ipad的原装电容笔以来&#xff0c;这款电容笔在目前市面上就一直很受欢迎&#xff0c;不过由于Apple Pencil的售价实在是太贵了&#xff0c;使得大部分人都买不起。于是&#xff0c;市面上…

在 Linux 虚拟机上使用 Azure 自定义脚本扩展版本

参考 azure创建虚拟机,创建虚拟机注意入站端口规则开放80端口、 2.转到资源&#xff0c;点击扩展应用程序&#xff0c;创建存储账户&#xff0c;创建容器&#xff0c;上传文件&#xff0c;选择文件&#xff0c;会自动执行部署。 apt-get update -y && apt-get insta…

chatgpt和xmind结合起来帮你制作精美的思维导图

介绍 chatgpt和xmind结合起来帮你制作精美的思维导图。 1.输出Markdown格式 2.xmind导入.md文件