关于Error in render: "TypeError: Cannot read property Or Cannot read property

450 阅读1分钟
[Vue warn]

Error in render: "TypeError: Cannot read property 'abort_msg' of undefined"

found in

---> <Index> at src/views/reply/index.vue
       <AppMain> at src/layout/components/AppMain.vue
         <Layout> at src/layout/index.vue
           <App> at src/App.vue
             <Root>
             
ypeError: 
Cannot read property 'abort_msg' of undefined
    at Proxy.render (index.vue?7e75:626)
    at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3569)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4081)
    at Watcher.get (vue.runtime.esm.js?2b0e:4495)
    at Watcher.run (vue.runtime.esm.js?2b0e:4570)
    at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4326)
    at Array.eval (vue.runtime.esm.js?2b0e:1989)
    at flushCallbacks (vue.runtime.esm.js?2b0e:1915)

这类报错是由于新传入的数据是深层嵌套的复杂数据类型,初次DOM也并未渲染,所以报错,此错误会影响数据的下次渲染状态,出现此报错就必须修改.

解决方案1(完美方案)

//在data里就把数据结构提前定义好,这样就不会出现此类报错
drawerObj: {
  answer: {},
  question: {
    review: {
      abort_msg: ''
    }
  }
}

在定义里给if判断

<div v-if="tabActive === '2'&&drawerObj.question.review&&drawerObj.question.review.abort_msg" class="abortInfo">
  {{ drawerObj.question.review.abort_msg }}
</div>

image.png 如此也能解决,但是代码会过于拢杂,并且该数据在其他地方引用时也需要再次写此判断,这个就相当于给漏水的管子最末头上了皮栓,而不是从源头就处理水流的问题,所以并不推荐