渲染错误:“TypeError:无法读取未定义的属性‘文本’"； [英] Error in render: "TypeError: Cannot read property 'text' of undefined"
问题描述
为什么在传递标题和描述时没有显示任何错误，但在 content.link.text 上显示渲染错误:TypeError:无法读取未定义的属性‘文本’"
父母
<div><splash :content="Splash"></splash></模板><脚本>从 './Child.vue' 导入 Child导出默认{name: '主要',数据 () {飞溅:{}，},创建(){const ax = axios.create({baseURL: '/静态'})ax.get('content.json').then(res => {this.Splash = res.data.general.splash})},成分: {溅}}
儿童
<div class="容器"><h2>{{ content.title }}</h2>//好的<p>{{ content.description }}</p>//好的<p>{{ content.link.text }}</p>//显示渲染错误</模板><脚本>导出默认{name: '飞溅',道具: ['内容']}
content.json
<代码>{一般的 : {飞溅:{"title" : "lorem 标题","description" : "lorem 描述",关联" : {文本":点击我"}}}}这很可能是由于第一次渲染时 content 的值造成的.那是一个空对象，它将为任何属性返回 undefined
content = {}link = content.link//链接未定义link.text//错误您应该有一个首次渲染的条件，这样您就不会显示内容，除非它有一个有效的值.
<小时>扩展
您的承诺在 created 钩子中，但由于它是异步的，它只会在当前同步周期完成后的某个时间点返回数据.到那时，Splash 组件已经使用将导致错误的对象创建.
如果您打算使用这样的模式来获取真实数据，则可以根据您希望用户流程的工作方式使用几种模式.
使用 lodash _.get 包装所有可能存在或不存在的数据.然后你的
content.link.text将进入计算属性并且类似于return _.get(content, 'link.text').这将导致它在此处正确返回一个值.在异步请求完成之前不要渲染 Splash，加载时显示加载
在 Splash 组件中使用 v-if 来保护
在这些中，我想说 2 是最好的 b/c，它可以解决问题.
How come it doesn't show any error passing the title and description but it shows a Error in render: "TypeError: Cannot read property 'text' of undefined" on content.link.text
Parent
<template>
<div>
<splash :content="Splash"></splash>
</div>
</template>
<script>
import Child from './Child.vue'
export default {
name: 'Main',
data () {
Splash: {},
},
created () {
const ax = axios.create({
baseURL: '/static'
})
ax.get('content.json')
.then(res => {
this.Splash = res.data.general.splash
})
},
components: {
Splash
}
}
</script>
Child
<template>
<div class="container">
<h2>{{ content.title }}</h2> // ok
<p>{{ content.description }}</p> // ok
<p>{{ content.link.text }}</p> // shows render error
</div>
</template>
<script>
export default {
name: 'Splash',
props: [
'content'
]
}
</script>
content.json
{
general : {
splash : {
"title" : "lorem title",
"description" : "lorem description",
"link" : {
"text" : "click me"
}
}
}
}
Most likely this is due to the value of content on first render. That is an empty object, which will return undefined for any property
content = {}
link = content.link // link is undefined
link.text // error
You should have a condition for first rendering so that you don't display the content unless it has a valid value.
Expanding
Your promise is in the created hook, but due to it being async it will only return data at some point after the current sync cycle finishes. By that time the Splash component will have already been created with the object that will cause the error.
If you are going to be doing a pattern like this where you will be fetching real data there are a few patterns you can use depending on how you want the user flow to work.
Use lodash _.get to wrap all of your data that may or may not be there. Then your
content.link.textwould go in the computed properties and be something likereturn _.get(content, 'link.text'). This will cause it to properly return a value here.Don't render the Splash until the async request is complete, while loading show a loading
Use v-if in your Splash component to guard
Out of these, i would say 2 is the best b/c it splits the concerns.
这篇关于渲染错误:“TypeError:无法读取未定义的属性‘文本’"；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
