javascript - [Vue 警告] : Error in render: "TypeError: Cannot read property ' products' of undefined"

Question

我在控制台选项卡中遇到了这个错误。

[Vue warn]: Error in render: "TypeError: Cannot read property 'products' of undefined"

我的代码运行正常，但我不知道为什么会出现该错误。我认为这是因为 DOM 首先呈现，然后我的数据才被填充。真的吗？如果是，我该如何解决？

这是我的组件:

<template>
    <main role="main">

        <!--        <breadcrumbs></breadcrumbs>-->

        <slider></slider>
        <bestseller :products="serverData.bestsellerProducts.products"></bestseller>
        <categorized-products></categorized-products>
        <latest :products="serverData.latestProducts.products"></latest>

    </main>
</template>

<script>
    import Slider from './Slider';
    import Bestseller from './Product/Bestseller';
    import Latest from './Product/Latest';
    import CategorizedProducts from './ProductCategory/CategorizedProducts';
    import {mapGetters} from 'vuex';

    export default {
        computed: {
            ...mapGetters({
                serverData: 'getServerData'
            })
        },
        components: {
            Slider,
            Bestseller,
            Latest,
            CategorizedProducts
        }
    }
</script>

<style scoped>

</style>

Answer 1

当您的组件在 serverData 可用之前呈现时，通常会发生这种情况。你应该首先在你的状态下初始化这个变量。像这样的东西:

state: {
    serverData: {
        bestsellerProducts: {products: []},
        latestProducts: {products: []},
    }
}

我建议将 bestSellerProducts 和 latestProducts 与 serverData 分开。

还要确保在组件内部正确处理 Prop 。参见 Vue Document on Props Validation .