【vue】数据渲染 非空验证 read properties of undefined (reading ‘length)

第一次报错

在这里插入图片描述
分析报错 通过console
在这里插入图片描述
对应的代码

//由forEach定位到 代码行 stringList.forEach(element => {  ,stringList
// An highlighted block
 async loadData () {
      try {
        // debugger
        this.loading = true

        console.log(this.filePath, '5')
        const buildTree = function (stringList) {
          const treeNode = []
          stringList.forEach(element => {

分析:stringList数组是函数buildTree 的形参,实参是 this.filePath数组,
打断点:
打log:console 得到 this.filePath此时为 undefined

或debugger:

// An highlighted block
 async loadData () {
      try {
        // debugger
        this.loading = true

        console.log(this.filePath, '5')
        const buildTree = function (stringList) {
          // if (stringList !== undefined) {
          const treeNode = []
          debugger
          stringList.forEach(element => {

断点界面
在这里插入图片描述
同样 鼠标放上去 可以看到 stringList 为undefined

解决 : 对stirngList数组进行非空判断

// html5 渲染条件 
v-if="treeData.length > 0"
// methods
 const buildTree = function (stringList) {
           if (stringList.length > 0) { // 在这里做一个非空判断
          const treeNode = []
          debugger
          stringList.forEach(element => {
            const nodes = element.split('/')
            insertNode(treeNode, nodes)
          })
          console.log(treeNode, '222222222')
          return treeNode
          // }
   }

结果 页面加载为空

控制台查看第二次报错

在这里插入图片描述
分析报错

单击 (File.vue?e858:29) 进入打断点界面
在这里插入图片描述
定位到断点
在这里插入图片描述
找出有问题的代码块

 <a-directory-tree
          v-if="treeData.length > 0" //这里出了问题
          :tree-data="treeData"
          multiple
          default-expand-all
          @select="onSelect"
          @expand="onExpand">
  </a-directory-tree>
  <div v-else>
          暂无数据
  </div>

分析:表达式treeData.length > 0 不成立,其中length属性有问题,treeData 不是数组

根本原因:后台返回数据需要时间,渲染是最先发生的,这个时候treeData还不是数组,没有对声明的变量进行判断

解决:首先对定义的数组进行非空验证 加上 !== undefined 判断条件

下面展示代码

// html
// An highlighted block
<a-directory-tree
          v-if="treeData !== undefined"
          :tree-data="treeData"
          multiple
          default-expand-all
          @select="onSelect"
          @expand="onExpand">
 </a-directory-tree>

解决了报错

总结
1.报错:
如果是forEach有问题,多半是该数组此时不是数组;在forEach方法里添加非空验证
如果是length 问题,多半是该数组此时不是数组;在html的组件里使用 v-if,添加数组非空验证

背后逻辑是:我们声明的数组,希望它是数组,但是在后台没有数据传过来时,此时它就不具备数组的功能 所以声明一个类型,在把它作为数组使用之前,首先要进行非空验证

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值