7월 11일 TIL - TypeError: Cannot read properties of undefined (reading 'map')

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

 

문제상황

1. json-server에 저장한 데이터를 axios를 통해 get해옴

2. 받아온 데이터를 map 메소드로 return 해서 뿌려줌

3. 화면에 아무것도 보이지 않음

4. 콘솔에 받아온 데이터를 찍어보면 undefined가 뜸

 

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

 

해결: &&을 이용하기!

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

 return (
    <ContentsLayout>
      {data && // 추가!
        data.map((post) => {
          return (
            <ContentContainer
              onClick={() => {
                navigate(`/detail`);
              }}
            >
              <ContentImgBox>
                <ContentImg src={훈연}></ContentImg>
              </ContentImgBox>
              <ContentInfoBox>
                <Writer>{post.writer}</Writer>
                <Title>{post.title}</Title>
              </ContentInfoBox>
            </ContentContainer>
          );
        })}
    </ContentsLayout>
  );