[23.08.06] map함수 오류

Cannot read properties of undefined (reading 'map')

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

 

리액트에서 맵함수를 돌리는데 위와 같은 오류가 났다.

문제해결!

앞에 products&&를 추가해주었다. 

{products&&products.map((product)=>{return(<>~~~~</>)})}

 

- &&을 이용한다.

- JavaScript에서 true && expression은 항상 expression으로 실행되고 false && expression은 항상 false로 실행된다. 따라서 조건이 참이면 && 바로 뒤의 요소가 출력에 나타난다. 거짓이면 React는 무시하고 건너뛴다. 

문제오류가 난 이유

React 는 렌더링이 화면에 커밋 된 후에야 모든 효과를 실행하기 때문이다. 즉 React는 return에서 articles.map(...)을 반복실행할 때 첫 턴에 데이터가 아직 안들어와도 렌더링이 실행되며 당연히 그 데이터는 undefined로 정의되어 오류가 나는 것이다.

 

참조

https://devbirdfeet.tistory.com/47