programing

맵의 데이터를 처리하는 방법vue에서 액세스할 속성의 정의되지 않은 오류를 방지하기 위해 첫 번째 렌더에서 시작합니다.

mailnote 2023. 6. 15. 22:01
반응형

맵의 데이터를 처리하는 방법vue에서 액세스할 속성의 정의되지 않은 오류를 방지하기 위해 첫 번째 렌더에서 시작합니다.

저는 mapGeters 도우미가 있는 vuex를 사용하여 스토어에서 저장된 어레이에 액세스하려고 합니다.
개체를 얻었지만 첫 번째 렌더링 중에 개체의 스토리지를 디스패치하는 API 호출이 완료될 때까지 mapGetters에 정의된 속성에 액세스할 수 없습니다.
이는 다음과 같은 결과를 낳습니다.undefined type error저장된 개체를 검색할 수 있을 때까지 렌더링된 보기 코드가 손상됩니다.

페이지를 처음 로드하는 동안 계산된 섹션의 속성이 정의되지 않았거나 액세스할 수 있는지 확인하려면 어떻게 해야 합니까?
아래는 제 가게와 Vue 코드입니다.createdlifecycle은 API 호출을 실행하여 성공적인 응답 시 어레이 개체 저장을 디스패치합니다.

스토어 코드

const state = {
    assessments:[],
    assessment:{},
    inspections:[]
}

const mutations={
    setAssessments(state, assessments){
        state.assessments = assessments
    },
    setAssessment(state, assessment){
        state.assessment = assessment
    },
    setInspections(state, inspections){
        state.inspections = inspections
    }

}

const getters={
    assessments:state =>state.assessments,
    inspections:state =>state.inspections,
    assessment:state =>state.assessment
    

}

const actions={

    saveAssessments({commit}, assessments){
        commit("setAssessments", assessments)
    },

    saveInspections({commit}, inspections){
        commit("setInspections", inspections)
    },
    saveAssessment({commit}, assessment){
        commit("setAssessment", assessment)
    }


}

const assessments = {
    state,
    mutations,
    actions,
    getters
}
export default assessments

게터 및 계산 섹션

  import { assesVehicleEndpoint } from "@/utils/apis";
  import { mapGetters} from 'vuex';

created: function (){

      this.fetchAssessments()
      },

  computed:{
      ...mapGetters({
   assessments:"assessments"  
  }),

  completedAssessments(){
    let  compAssessments 
   if(this.assessments != undefined){
    compAssessments = this.assessments.results.filter(assessment=>{
      return(assessment.pre_pre_screening_status === "D" || assessment.pre_pre_screening_status === "C"
      || assessment.pre_screening_status === "D" || assessment.pre_screening_status === "C"
      || assessment.car_care_status === "D" || assessment.car_care_status === "C"
      || assessment.inspection_status === "D" || assessment.inspection_status === "C"
      || assessment.pre_screening_plus_status === "D" || assessment.pre_screening_plus_status === "C"
      )
    }) 
   }

    return compAssessments
  },
 

  }

언급URL : https://stackoverflow.com/questions/74529672/how-can-one-handle-data-from-mapgetters-on-first-render-to-avoid-undefined-error

반응형