[해결 방법] TypeError: Cannot read property 'rating' of undefined

⚛️ 기본 환경: IDE: VS code, Language: React

 

 

발생 Error

React에서 다음 Source Code를 실행할 경우,

⚠️ 다음과 같은 Error 발생

TypeError: Cannot read property 'movie' of undefined

 

 

발생 원인

getMovie()에 사용되는 API JSON데이터 구조는 다음과 같음

출처: https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year

해당 객체 전체를 json으로 받고 rating을 추출하고자할 경우, data.data.movie.rating으로 접근할 수 있으나 객체가 로드되지 않은 상태에서 접근 시 TypeError 발생

 

 

해결 방법

1. ?.(Optional Chaining) 연산자를 사용하여 객체 체인 중간에 있는 속성 또는 메서드에 접근하기 전에 해당 값이 존재하는지 확인하고, 값이 존재하지 않을 경우에 undefined를 반환하여,TypeError를 방지

* ?.(Optional Chaining) 연산자: 값이 존재하지 않을 가능성이 있는 중첩된 객체나 배열의 속성 또는 메서드에 안전하게 접근할 수 있도록 도와줌(API 비동기 작업 중 데이터가 로드되면 실제 값을 반환하고, 로드되지 않았을 때는 undefined를 반환)

기존 rating에서 background_image로 사용

 

2. 객체를 크게 잡을 경우, 단계를 깊이 들어가야하므로 setData의 범위를 JSON의 일부(json.data.movie)로 한정