Uncaught TypeError: Cannot read properties of undefined (reading 'map')

대표이미지

 

728x90

 

🐞 에러발생

{movieDetail.genres.map((item)=>(
   <Badge bg="danger"><li>{item.name}</li></Badge>
))}

 

프로젝트를 진행하던 중 Uncaught TypeError : Cannot read properties of undefined (reading 'map') 이러한 에러가 발생했다.

error

 

하지만 console.log()로 출력해보니 배열이 문제 없이 나오는 것을 확인할 수 있다.

console.log

 

🐞 에러원인

React는 렌더링이 화면에 커밋 된 후에야 모든 효과를 실행하기 때문이다. 

 

즉, React는 return에서 user.map(...)을 반복실행 할 때 첫 턴에 데이터가 아직 안들어와도 렌더링이 실행되며 당연히 그 데이터는 undefined로 정의되어 오류가 나는 것이다.

 

🐞 해결방안

&&를 이용하는 것이다.

 

JavaScript 에서 true && expression은 항상 expression으로 실행되고 false && expression은 항상 false로 실행된다.

따라서 조건이 참이면 && 바로 뒤의 요소가 출력에 나타난다. 

{movieDetail.genres && movieDetail.genres.map((item)=>(
   <Badge bg="danger"><li>{item.name}</li></Badge>
))}