如何解决报错vue.runtime.esm.js:4605 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'musicSize')" found in ---> <Anonymous> <App> at src/App.vue <Root>在<template> <div> <div class="flex"> <i class="iconfont icon-fanhuijiantou" @click="returntop"></i> <i class="iconfont icon-diandian"></i> </div> <div class="container"> <h5>{{ name }}</h5> <p>{{ alias }}</p> <p>{{ formatNumber(fansCnt) }}</p> <p class="hheight">{{ imageDesc }}</p> <div class="one"> <span>+ 关注</span> <i class="iconfont icon-xiangxiajiantou"></i> </div> </div> <van-tabs v-model="active" class="over"> <van-tab title="主页"> <homePage></homePage> </van-tab> <van-tab title="歌曲" :badge="singerdeatilList.artist.musicSize"> <songView :id="this.id"></songView> </van-tab> <van-tab title="专辑" :badge="singerdeatilList.artist.albumSize"> <album-view :id="this.id"></album-view> </van-tab> <van-tab title="视频" :badge="singerdeatilList.videoCount"> <videoView></videoView> </van-tab> </van-tabs> </div> </template> <script> import { singerDetailsApi, singerFansApi } from "@/api/singer"; import albumView from "@/views/singer/components/albumView.vue"; import homePage from "@/views/singer/components/homePage.vue"; import songView from "@/views/singer/components/songView.vue"; import videoView from "@/views/singer/components/videoView.vue"; export default { components: { albumView, homePage, songView, videoView, }, data() { return { active: 1, singerdeatilList: [], id: "", fansCnt: "", name: "", //歌手姓名 imageDesc: "", //歌手身份 alias: [], //歌手别名 musicSize: "", //音乐数量 albumSize: "", //专辑数量 }; }, methods: { returntop() { this.$router.push("/singerClass"); }, // fn(fans) { // if (fans > 10000) { // return (fans / 10000).toFixed(1) + "万粉丝"; // } // }, }, async created() { try { // 用query页面数据不会丢失 this.id = this.$route.query.id; let { data } = await singerDetailsApi(this.id); let fans = await singerFansApi(this.id); this.singerdeatilList = data.data; // 歌手名字 this.name = this.singerdeatilList.artist.name; // console.log(this.singerdeatilList.artist.name); // 粉丝数量 this.fansCnt = fans.data.data.fansCnt; // console.log(fans.data.data); // console.log(this.singerdeatilList); // 歌手身份 this.imageDesc = this.singerdeatilList.identify.imageDesc; // 歌手别名 this.alias = this.singerdeatilList.artist.alias[0]; } catch (err) { console.log(err); } }, };这段代码里

报错信息显示 `TypeError: Cannot read properties of undefined (reading 'musicSize')`，意味着在模板中使用 `singerdeatilList.artist.musicSize` 时，`singerdeatilList.artist` 为 `undefined`。

这可能是因为在 `created()` 生命周期中，异步请求的数据还没有返回，导致 `singerdeatilList` 为空。因此，可以在模板中增加一个条件判断，当 `singerdeatilList.artist` 存在时才渲染 `:badge` 属性。

例如：

<van-tab title="歌曲" v-if="singerdeatilList.artist" :badge="singerdeatilList.artist.musicSize">
  <songView :id="this.id"></songView>
</van-tab>

这样就可以避免因为数据还未返回而导致的报错问题。

相关问题

vue.runtime.esm.js:4605 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'data')"

这个错误是由于在渲染过程中尝试读取未定义的属性"data"引起的。根据引用，这个错误通常发生在使用getters简化数据时，如果state.goodsInfo的初始值为空对象，那么空对象的"data"属性将为undefined。当你试图使用这个属性时，就会出现警告。同样，根据引用的建议，在返回值后面添加 "|| {}" 可以解决这个问题，因为初始状态下空对象的属性为undefined。所以，你可以在代码中加上这个判断来避免此错误的发生。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [报错 | vue.runtime.esm....c320:4560 [Vue warn]: Error in render: “TypeError: Cannot read properties of](https://blog.csdn.net/muziqwyk/article/details/126191223)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [vue使用prop可以渲染但是打印台报错的解决方式](https://download.csdn.net/download/weixin_38653155/13677046)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

vue.runtime.esm.js?c320:4605 [Vue warn]: Error in render: "TypeError: Cannot read property 'state' of undefined"

这个错误是由于在渲染时尝试访问一个未定义的属性'state'引起的。根据引用[3]的内容，这个错误可能是因为你没有正确处理初始状态为空对象的情况。在你的getters函数中，你可以添加一个空对象的默认返回值来避免这个错误。通过在return语句后面添加"|| {}"，即使state.goodsInfo初始值为空对象，也会返回一个空对象作为默认值。这样，就不会再出现"Cannot read property 'state' of undefined"的错误了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [报错 | vue.runtime.esm....c320:4560 [Vue warn]: Error in render: “TypeError: Cannot read properties of](https://blog.csdn.net/muziqwyk/article/details/126191223)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [【报错】vue.runtime.esm.js?c320:4605 [Vue warn]: Duplicate keys detected: ‘40825‘. This may cause ...](https://blog.csdn.net/qq_40797578/article/details/128266387)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]