js 报错 Cannot read property ‘dictTreeList‘ of undefined,但数据却存在

js报错信息

Error in render: "TypeError: Cannot read property 'dictTreeList' of undefined"  vue.esm.js?a026:1897

TypeError: Cannot read property 'dictTreeList' of undefined

数据的获取

      const { data: res } = await this.$http.get('course/getCourseList?userId=' + id)
      if (res.code == 200) {
        this.total = JSON.parse(JSON.stringify(res.data))
      }

使用

            <div v-for="item in total[0].dictTreeList" :key="item.id" class="text item">
              <!-- <div v-for="item in stepOne" :key="item.id" class="text item"> -->
              <div>{{item.valueName}}</div>
              <div v-for="it in item.courseList" :key="it.id">
                <span>文件：</span>
                <span>{{it.headline}}</span>
              </div>
            </div>

关于 this.total[0].dictTreeList 部分能正常打印，且页面显示内容，但有报错信息存在
分析过可能是请求回来的数据格式的问题，转换this.total = JSON.parse(JSON.stringify(res.data))无效，

报错信息中出现 ‘dictTreeList’ of undefined" 未定义，尝试将信息存在页面data中

        this.stepOne = this.total[0].dictTreeList
        this.stepTwo = this.total[1].dictTreeList

然后遍历stepOne stepTwo ，解决问题

暂时没明白机制在哪，欢迎讨论补充