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

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

웹 사이트의 콘솔에 다음 오류가 표시됩니다.

vue.esm.js?a026:628 [Vue warn]: Error in render: "TypeError: Cannot read property 'id' of undefined"

found in

---> <ApiInstellingen> at src/views/settings/analytics.vue
       <Anonymous>
         <CWrapper>
           <TheContainer> at src/containers/TheContainer.vue
             <App> at src/App.vue
               <Root>

인터넷에서 비슷한 문제를 많이 봐왔으며, 데이터가 렌더링되기 전에 데이터에 액세스하려고 하는 것과 관련이 있다는 것을 알고 있습니다.내가 찾은 해결책들 중 어떤 것도 나에게 도움이 되지 않는 것 같았다.

내 코드는 다음과 같습니다.

<template>
    <div>
        <p> {{allAnalytics[0].id}} </p>
    </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

export default {
    name: "apiInstellingen",
    methods: {
        ...mapActions(['fetchAnalytics'])  
    },
    created() {
        this.fetchAnalytics();
    },
    computed: mapGetters(['allAnalytics']),
};
</script> 

내 경우에 효과가 있는 솔루션을 아는 사람이 있습니까?v-if를 시도하여 상태를 선언하고 데이터에 변수를 선언했지만 아무 것도 작동하지 않습니다.

감사해요!

이것은 당신의allAnalytics어레이는 사용할 때 정의되어 있지 않기 때문에(페치는 아직 완료되지 않았기 때문에) 0 인덱스에 액세스할 수 없습니다.

렌더링 조건을 다음과 같이 추가할 수 있습니다.

<template>
<div>
    <p v-if"allAnalytics && allAnalytics[0]"> {{allAnalytics[0].id}} </p>
</div>

에러 메시지로부터 얻을 수 있는 것은, 이 에러 메세지가allAnalytics템플릿 렌더링 시 배열이 인스턴스화되지만 내용이 없습니다.

제 생각엔 당신이v-if="allAnalytics.length > 0템플릿의 부모 div에는 이 에러는 표시되지 않습니다.하지만 더 중요한 것은, 스스로에게 물어봐야 한다는 것이다.allAnalytics어레이의 길이가 제로인 적이 있습니까?"

아마도 당신은 다음 명령어를 추가할 필요가 있을 것이다.v-for아이에게 지시하다<p>태그를 붙여 반복하다allAnalytics어레이, 예를 들어 다음과 같습니다.물론 이것은 사용 사례에 따라 다릅니다.

<template>
    <div>
        <p v-for="item in allAnalytics" :key="item.id" > {{item.id}} </p>
    </div>
</template>

언급URL : https://stackoverflow.com/questions/63600789/vue-warn-error-in-render-typeerror-cannot-read-property-xxx-of-undefined