【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，添加数组非空验证

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