[Vue warn]: Error in render: “TypeError: Cannot read properties of undefined（reading“category1Name“

Obviously the page displays normally, but the console keeps reporting the following error

[Vue warn]: Rendering error: Found in  "TypeError: Cannot read property of undefined (read 'category1Name')"

 Detail's vuex warehouse 

import { reqDetail } from "@/api"
export default{
    actions:{
        async getDetail({commit},skuId){
            const result = await reqDetail(skuId)
            console.log(result)
            if(result.code == 200){
                commit("GETDETAIL", result.data)
            }
        }
    },
    mutations:{
        GETDETAIL(state,value){
            state.DetailList = value
        }
    },
    state:{
        DetailList:{}
    },

    getters:{
        categoryView(state){
            return state.DetailList.categoryView 
        },
    }
}

It can be seen that DetailList is the data obtained by sending a request, and this data, when the request does not return data, the initial state is an empty object or an array 

Extract the data in DetailList through getters for easy use

Using categoryView data in components

<div class="conPoin">
    <span v-show="categoryView.category1Name" >{
   
   {categoryView.category1Name}}</span>
    <span v-show="categoryView.category2Name" >{
   
   {categoryView.category2Name}}</span>
    <span v-show="categoryView.category3Name" >{
   
   {categoryView.category3Name}}</span>
</div>

computed:{
    ...mapGetters(['categoryView'])
}

Will report a start error

Reason: Suppose our network fails and the data of DetailList is not requested, that is, DetailList is an empty object. When we call return state.DetailList.categoryView in getters, because DetailList is empty, there is no categoryView, that is The categoryView obtained by our getters is undefined. So when we use this variable in html, there will be an error without this attribute.

That is: there will be no error when the network is normal, but an error will be reported once there is no network or there is a network problem.

solve:

        categoryView(state){
            return state.DetailList.categoryView || {}
        },

 Add a || after the return value. When the attribute value is undefined, the data after || will be returned, so that no error will be reported.

If the return value is an object, add || { }

If the return value is an array, add || [ ]

This error will not affect the page, but at least you need to understand the reason for the alert

If you use data in a component that may initially be empty, you can also use an empty array or object to cover it up based on the type of data returned.

<template>
  <div class="spec-preview">
    <img :src="imgObj.imgUrl"/>
    <div class="event"></div>
    <div class="big">
      <img :src="imgUrl" />
    </div>
    <div class="mask"></div>
  </div>
</template>

<script>
  export default {
    name: "Zoom",
    props: ["skuImageList"],
    computed:{
      imgObj(){
        return this.skuImageList[0] || {}
      }
    }
  }
</script>

Or directly determine when the data has a value and then display it.

<template>
  <div class="spec-preview">
    <img :src="skuImageList[0].imgUrl" v-if="skuImageList"/>
    <div class="event"></div>
    <div class="big">
      <img :src="skuImageList[0].imgUrl" v-if="skuImageList"/>
    </div>
    <div class="mask"></div>
  </div>
</template>

<script>
  export default {
    name: "Zoom",
    props: ["skuImageList"]
  }
</script>