解决Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘id‘)报错

2023-11-18

项目场景:

做黑马的人资项目时,要读取store中的userInfo里的id值,报Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘id’)错,起初以为是axios发异步请求的问题,直到后来一直尝试,终于找到了问题所在!


问题描述

连续访问对象里的值

例如:我现在user模块下的state是这样的,userInfo里的值要等到发请求才会填充

state: {
    token: getToken() || '',
    userInfo: {

    }

请求回来的值是这样的
在这里插入图片描述

那我现在要是还没请求,userInfo 就还是个空对象,访问store.user.state.userInfo.data,就是为undefined
但是!!最重要的点来了,如果你接着访问store.user.state.userInfo.data.id,这时候就不是简单的undefined
而是 控制台报错,Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘id’)

原因分析:

从上面的讲解来看,不难知道,你要是访问对象里不存在的属性,结果是undefined,但如果你接着还往下访问,那就会报错


解决方案:

有两个办法解决

1.在userInfo下加一个data

state: {
    token: getToken() || '',
    userInfo: {
      data: {}
    }
  }

像这样,你访问userInfo.data就是一个空对象,再访问userInfo.data.id的话,就是undefined啦! 就不会报错了

2.利用?.的访问方式

store.state.user.userInfo?.data?.id, 利用?.的方式访问对象中的属性,要是有一个属性找不到的话,就会立即返回undefined,
也不会出现报错的情况

store.state.user?.data?.id
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

解决Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘id‘)报错 的相关文章

随机推荐

  • 【Linux学习笔记】7. Linux文件IO详解(附代码实例)

    Linux文件I O 前置知识 Linux文件I O分为系统IO和标准IO 常用于系统编程 系统I O通过文件描述符 fd 来操作文件 标准I O通过文件流 FILE 来操作文件 Linux下可以使用man命令来查看使用手册 学习和使用这些
  • 数据备份技术知识梳理(建议收藏)

    所谓数据保护技术是指对当前时间点上的数据进行备份 如果说原始数据被误删除了 可以通过备份数据找回或恢复数据 从底层来分 数据保护可以分为文件级保护和块级保护 文件级备份 文件级备份 将磁盘上所有文件通过调用文件系统接口备份到另一个介质上 也
  • 11-7 读写指定大小的字节

    1 字节 一个字节 8 位 例如在 ASCII 码表中 0000 1010 表示换行 若从十六进制角度看 则结果为 0a CLion debug 便是以十六进制查看的字节 2 读字节 fread 函数用于指定字节大小的读取 该函数可读取二进
  • 重启大法好

    在做springMVC服务器的时候 出现解析不了URL 即dispatch映射不了action的时候 1 检查springname servlet xml 2 检查web xml 3 检查注解是否错误 4 重启eclipse 5 重启电脑
  • Unity3D射线检测

    射线检测主要用于像子弹是否打中物体 捡取物品等情况 本来面向百度想找例子看看 不过没找到合适的 还是自己总结尝试吧 以下测试Unity3D版本 2017 4 2f2 射线的检测步骤如下 1 Ray 这个类为了产生一个射线 如果我们想要场景中
  • Acwing 906. 区间分组

    1 将所有区间按照左端点从小到大排序 2 从前往后处理每个区间 判断能否将其放到某个现有的组中 L i gt Max r 1 如果不存在这样的组 则开新组 然后将其放进去 2 如果存在这样的组 将其放进去 并更新当前组的Max r incl
  • cocoscreator 3.x 获取像素颜色

    const pos v2 世界坐标 const color as camera rt targetTexture readPixels pos v2 x pos v2 y 1 1 获得颜色 cc color color as 0 color
  • BeautifulSoup4(bs4)

    BeautifulSoup4是一个高效的网页解析库 可以从HTML或XML文件中提取数据 支持不同的解析器 比如 对HTML解析 对XML解析 对HTML5解析 就是一个非常强大的工具 爬虫利器 一个灵感又方便的网页解析库 处理高效 支持多
  • java 枚举应用_Java枚举应用

    JDK5 0开始引进了java Enum枚举类型 它可作为我们在编写代码时的一个技巧 有时恰恰因为它 我们能够 优雅而干净 地解决问题 在使用枚举类型时 我们所编写的枚举类都是隐式地继承于java lang Enum类 枚举类的每个成员都被
  • 报错:ImportError: XXXX.so:invalid ELF header

    运行程序遇到如下报错 原因是该路径下的 so文件与运行程序的环境不匹配 比如我在mac电脑上编译生成的 so文件 直接放到linux服务器上跑了 自然会有错误 解决的方法是在Linux环境中重新编译生成新的 so文件
  • C语言非常道 6.7

    使用结构类型 计算结构类型的大小 在上面这个程序中包含一个输入输出的头文件即可 这个位置又发现一个问题 在定义结构体的时候 数组的大小是一定要标明的 否则在计算结构体大小的时候 编译无法通过
  • C/C++ 安全编码 —— 指针与内存

    1 仿踩内存 if buf len 1 0x5A return
  • Node.js开发入门—HTTP文件服务器

    HelloWorld示例只有演示意义 这次我们来搞一个实际的例子 文件服务器 我们使用Node js创建一个HTTP协议的文件服务器 你可以使用浏览器或其它下载工具到文件服务器上下载文件 用Node js实现的HTTP文件服务器 比我在Qt
  • iOS、mac开源项目及库

    1 用来生成 3x 的图片资源对应的 2x 和 1x 版本 只要拖拽高清图到 3x 的位置上 然后按 Ctrl Shift A 即可自动生成两张低清的补全空位 当然你也可以从 2x 的图生成 3x 版本 如果你对图片质量要求不高的话 htt
  • 深入理解操作系统原理之文件系统

    一 概述 操作系统对系统的软件资源 不论是应用软件和系统软件 的管理都以文件方式进行 承担这部分功能的操作系统称为文件系统 1 文件 计算机系统对系统中软件资源 无论是程序或数据 系统软件或应用软件都以文件方式来管理 文件是存贮在某种介质上
  • flink 1.4版本flink table方式消费kafka写入hive方式踩坑

    最近在搞flink 搞了一个当前比较新的版本试了一下 当时运行了很长时间 hdfs里面查询有文件 但是hive里面查询这个表为空 后面用了很多种方式 一些是说自己去刷新hive表 如下 第一种方式刷新 alter table t kafka
  • win10 下 python连接读取hive,报错No protocol version header

    impyla 依赖的thriftpy2包的相关报错 1 No protocol version header 找到对应位置注释掉该报错的代码 if strict raise TProtocolException type TProtocol
  • java.lang.ClassNotFoundException: Didn't find class "android.support.v4.app.CoreComponentFactory"

    android9报错 java lang ClassNotFoundException Didn t find class android support v4 app CoreComponentFactory
  • css 样式实战

    css实战目录 一 纯css 控制 布局等分 2 1 3 1 position 定位 input 只展示下边线 input textarea placeholder 提示 的颜色 input 输入框增加 搜索图标 1 input 输入框增加
  • 解决Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘id‘)报错

    项目场景 做黑马的人资项目时 要读取store中的userInfo里的id值 报Uncaught in promise TypeError Cannot read properties of undefined reading id 错 起