渲染函数中的错误:“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屋！
