[Vue warn]:렌더 오류: "TypeError: 정의되지 않은 'products' 속성을 읽을 수 없습니다."

[Vue warn]:렌더 오류: "TypeError: 정의되지 않은 'products' 속성을 읽을 수 없습니다."

콘솔 탭에서 이 오류가 발생했습니다.

[Vue warn]:렌더 오류: "TypeError: 정의되지 않은 'products' 속성을 읽을 수 없습니다."

제 코드는 정상적으로 작동하는데 왜 그 오류가 나타나는지 모르겠습니다.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>

이 문제는 종종 구성 요소가 이전에 렌더링될 때 발생합니다.serverData사용할 수 있습니다.상태에서 이 변수를 먼저 시작해야 합니다.다음과 같은 것:

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

분리하는 것을 추천합니다.bestSellerProducts그리고.latestProducts부터serverData.

또한 구성 요소 내부에서 소품을 올바르게 취급해야 합니다.속성 검증에 대한 Vue 문서를 참조하십시오.

둘 중 하나인 것 같습니다.bestsellerProducts또는latestProducts을 가지고 있지 않습니다.products기여하다.이 두 가지 항목에 대한 값을 게시해 주시면 더 나은 답변을 드릴 수 있을 것 같습니다.

렌더링 후 배열로 이동하시겠습니까?

이 방법은 일종의 게토이지만:

오류가 해당 텍스트를 포함하는 경우 오류 핸들러를 만들 수 있습니다. 그렇지 않으면 console.error() 함수를 반환합니다.

언급URL : https://stackoverflow.com/questions/55979824/vue-warn-error-in-render-typeerror-cannot-read-property-products-of-unde