渲染函数中的错误:“TypeError:无法读取未定义的属性",使用 Vuex 和 Vue Router
[英] Error in render function: “TypeError: Cannot read property of undefined”, using Vuex and Vue Router
本文介绍了渲染函数中的错误:“TypeError:无法读取未定义的属性",使用 Vuex 和 Vue Router的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我一直在使用 Vue、Vuex 和 Vue-Router 处理一个问题.我正在构建一个闪存卡应用程序,在创建主应用程序时获取所有卡片,然后使用 Vuex getter 通过其作为路由参数传递的 id 获取每张卡片.
相关位:
App.vue
出口默认{成分: {'app-header':标题,},数据() {返回 {}},创建(){this.$store.dispatch('getAllCards');}}
dispatch('getAllCards')
只是从数据库中提取所有卡片并提交到 Vuex store.js
.
现在我设置了一个getter
:
getter: {cardById: (状态) =>(id) =>{return state.allCards.find((card) => card._id === id);}}
这是Card.vue
:
<div><br><div v-if="flipped" class="container"><div class="box"><pre v-if="card.code"><code class="preserve-ws">{{card.back}}</code></pre><p class="preserve-ws center-vertical" v-else>{{card.back}}</p>
<div v-else class="container"><div class="box"><h1 class="title has-text-center-vertical is-2">{{card.front}}</h1>
</模板><脚本>导出默认{数据() {返回 {卡片: {},翻转:假,general_card:假,代码卡:真实,random_card: 假}},计算:{},方法: {},创建(){this.card = this.$store.getters.cardById(this.$route.params.id);}}
我收到标题中引用的 TypeError.我的理解是 created()
钩子发生在 data()
之后,所以我可以使用 {card}
分配吸气剂.不幸的是,这什么也没显示...
如果我将 card()
指定为计算属性:
计算:{卡片() {返回 this.$store.getters.cardById(this.$route.params.id);}}
卡片显示,但我仍然在控制台中收到该错误.知道为什么吗?我看了这个并尝试了该解决方案,但无济于事.
解决方案
问题没有得到正确答案的所有前提.(我们不知道突变,状态,也不知道动作,我们对 app-header 组件一无所知)所以我们不得不承认一些假设:
state.allCards
是一个空的 Array
当你挂载组件时- action
getAllCards
是一个异步函数,用于检索或设置带有突变的 state.allCards
cardById
的 getter,返回一个函数,所以 vuex 不能在函数上应用反应式.因此,如果状态发生变化,则不会正确触发 getter.要纠正此问题,请使用 computed
,正如您在此处提到的那样.
但它没有修复 undefined 错误
,在我看来,这是因为 getter 在挂载时返回 undefined
.
getter: {cardById: (状态) =>(id) =>{var card = state.allCards.find((card) => card._id === id);如果(卡){回程卡;}//未定义时返回默认值返回 {前面:'默认值'};}}
您可以在这个 jsfiddle 上看到实现,控制台上没有错误.>
或者您可以为卡片组件设置未定义值的加载状态.
如果我的假设是错误的,请提供一个 jsfiddle 来帮助您.
I have been dealing with an issue using Vue, Vuex and Vue-Router. I'm building a flash cards app, fetching all the cards on main app creation, then using a Vuex getter to get each card by its id which is passed as a route parameter.
Relevant bits:
App.vue
export default {
components: {
'app-header': header,
},
data() {
return {
}
},
created() {
this.$store.dispatch('getAllCards');
}
}
The dispatch('getAllCards')
is just pulling all the cards from the DB and committing to Vuex store.js
.
Now I set up a getter
:
getters: {
cardById: (state) => (id) => {
return state.allCards.find((card) => card._id === id);
}
}
Here is Card.vue
:
<template>
<div>
<br>
<div v-if="flipped" class="container">
<div class="box">
<pre v-if="card.code"><code class="preserve-ws">{{card.back}}</code></pre>
<p class="preserve-ws center-vertical" v-else>{{card.back}}</p>
</div>
</div>
<div v-else class="container">
<div class="box">
<h1 class="title has-text-centered center-vertical is-2">{{card.front}}</h1>
</div>
</div>
</template>
<script>
export default {
data() {
return {
card: {},
flipped: false,
general_card: false,
code_card: true,
random_card: false
}
},
computed: {
},
methods: {
},
created() {
this.card = this.$store.getters.cardById(this.$route.params.id);
}
}
</script>
I am getting the TypeError referenced in the title. My understanding is that the created()
hook happens after data()
has been set up, so then I can assign {card}
using the getter. Unfortunately this displays nothing...
If I assign card()
as a computed property:
computed: {
card() {
return this.$store.getters.cardById(this.$route.params.id);
}
}
The card shows, but I still get that error in console. Any idea why? I looked at this and attempted that solution, but to no avail.
解决方案
The question don't have all the premise to get a correct answer.
(We don't know the mutations, the state, neither the actions and we have no clues about app-header component)
So we have to admit some hypothesis :
state.allCards
is an empty Array
when you mount the component
- action
getAllCards
is an async function to retrieve or set state.allCards
with a mutation
cardById
's getters, return a function, so vuex can't apply reactive on a function. So if the state change, the getter won't be trigger correctly.
To correct this, use computed
as you mention here.
But it don't fix the undefined error
, that from my point of view, is because the getters return undefined
on mount.
getters: {
cardById: (state) => (id) => {
var card = state.allCards.find((card) => card._id === id);
if(card) {
return card;
}
// on undefined return a default value
return {
front:'default value'
};
}
}
You can see the implementation on this jsfiddle with no error on console.
Or you can have a loading state on undefined value for your card component.
If my hypothesis is wrong please provide a jsfiddle to help you.
这篇关于渲染函数中的错误:“TypeError:无法读取未定义的属性",使用 Vuex 和 Vue Router的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!