渲染函數錯誤：「TypeError：無法讀取未定義的屬性」，使用Vuex和Vue路由器

我一直在處理使用Vue，Vuex和Vue-Router的問題。我正在構建一個閃存卡應用程序，在創建主應用程序時獲取所有卡，然後使用Vuex getter通過其作爲路由參數傳遞的id獲取每張卡。渲染函數錯誤：「TypeError：無法讀取未定義的屬性」，使用Vuex和Vue路由器

相關位：

App.vue

export default { 
    components: { 
    'app-header': header, 
    }, 
    data() { 
    return { 
    } 
    }, 
    created() { 
    this.$store.dispatch('getAllCards'); 
    } 
}

的dispatch('getAllCards')只是拉從數據庫中所有的牌，並承諾Vuex store.js。

現在我成立了一個getter：

getters: { 
    cardById: (state) => (id) => { 
    return state.allCards.find((card) => card._id === id); 
    } 
}

這裏是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>

我得到的標題中引用的類型錯誤。我的理解是created()掛鉤發生在data()設置完成後，所以我可以使用getter分配{card}。很不幸，這顯示什麼...

如果我給你card()作爲計算性能：

computed: { 
    card() { 
    return this.$store.getters.cardById(this.$route.params.id); 
    } 
}

卡顯示，但我仍然得到這個錯誤控制檯。任何想法爲什麼？我看着this並試圖解決，但無濟於事。

來源

2017-07-08 Aos

我認爲這是錯誤扔在這一步

getters: { 
    cardById: (state) => (id) => { 
    return state.allCards.find((card) => card._id === id); 
    } 
}

在這一步，實在找不到車_id，因爲allcards是null;

然後你用計算器代替，當所有卡都改變時，它會重新得到; 你可以改變這樣的

getters: { 
    cardById: (state) => (id) => { 
    return state.allCards.find((card) => card && card._id === id); 
    } 
}

來源

2017-07-08 03:30:52 masongzhi

對不起，我本來應該更具體的...我得到確切的錯誤是： '[Vue公司提醒]：錯誤的渲染功能：「類型錯誤：無法讀取屬性‘前’的未定義」' 您的解決方案並沒有真正做任何事情。 – Aos

在我最近的評論中不意味着粗魯。無論如何，錯誤追溯顯示它出現在'Card.vue'組件中。 – Aos

它有一個簡單的解決方案，你可以使用'card && card.front'來代替，然後不會拋出錯誤，但是我不能發現的真正原因 – masongzhi

$route.params.id代碼必須string，那麼什麼是card._id類型？看來每個card._id是number，我想。

來源

2017-07-08 06:14:40 kaorun343

當做'typeof card._id'時，我返回一個字符串。 – Aos

您需要的是基於商店狀態的派生狀態，該狀態是基於卡片ID返回已過濾的卡片。這個ID通過路由參數被接收到你的組件。因此，它更好地使用一個計算的屬性，而不是傳遞參數到店干將

而是在數據屬性初始化card的使card一個計算的屬性是這樣的：

computed:{ 
    card(){ 
     return this.$store.state.allCards.find((card) => card._id === this.$route.params.id); 
    } 
}

注意這個

如果一個組件需要基於它自己的狀態派生的存儲狀態（在你的情況下是rourte params），它應該定義一個本地計算的屬性

來源

2017-07-08 09:10:42

我試過別人的解決方案，他們沒有工作。但我最終得到了它的工作。這裏是我工作：

我結束了包括頂級：

<div v-if="!card"> Loading card... </div> 
<div v-else> Rest of card template </div>

這似乎已經關閉了錯誤。此外，該卡的生命作爲計算性能：

card() { 
    return this.$store.getters.cardById(this.$route.params.id); 
}

來源

2017-07-08 17:56:47 Aos

問題沒有所有的前提下，得到一個正確的答案。（我們不知道的突變，狀態，既沒有行動，我們也沒有關於應用頭組件線索）因此，我們不得不承認一些假設：

state.allCards是一個空Array當你安裝該組件
行動getAllCards是一個異步函數與突變檢索或設置state.allCards

cardById的干將，返回的函數，所以vuex不能在功能應用反應。所以如果狀態改變，吸氣劑將不會被正確觸發。要解決此問題，請使用computed，正如您提到的here。

但是它並沒有修復undefined error，從我的角度來看，是因爲getter在mount上返回undefined。

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' 
    }; 
    } 
}

你可以看到這個jsfiddle上的實現，在控制檯上沒有錯誤。

或者您的卡組件的未定義值可以有加載狀態。

如果我的假設錯了，請提供一個jsfiddle來幫助你。

來源

2017-07-23 13:03:16 Tobino

渲染函數錯誤：「TypeError：無法讀取未定義的屬性」，使用Vuex和Vue路由器

回答

相關問題