관리 메뉴

프로그래밍 삽질 중

[React] Cannot read property 'map' of undefined 해결 본문

과거 프로그래밍 자료들/컴퓨터설정&오류

[React] Cannot read property 'map' of undefined 해결

평부 2022. 5. 22. 17:09

* 문제 상황 : 메인화면에 보여줄 이미지들을 일일이 작성하기보단 map을 이용하려고 했음

* Cannot read property 'map' of undefined 오류 발생

 

 

* 문제 해결에 도움을 준 블로그

https://devbirdfeet.tistory.com/47

 

React 실행오류 Cannot read property 'map' of undefined

Updated 2021/05/10 React hook 을 사용하여 네이버 뉴스 검색 API 를 데이터를 화면에 뿌려주려 하다가 이런 에러메시지가 나왔다. 문제상황) TypeError: Cannot read property 'map' of undefined 왜 나에게 이..

devbirdfeet.tistory.com

 

* 원인 : return에서 images.map()을 반복실행 시 첫 턴에 아직 데이터가 들어오지 않아도 렌더링이 실행, 그 데이터는 undefined로 정의되어 오류가 나는 것

 

* 해결 && 이용

 

[수정 전]

 

//수정 전
function Test(props) {
  return (
    <div>
        {props.images.map((image, index) => (
            <div key={index}>
              <img
                style={{ width: "250px", height: "120px" }}
                src={`http://localhost:5000/${image}`}
              />
            </div>
          ))}
    </div>
  );
}

export default Test;

 

 

[수정 후]

 

//수정 후
function Test(props) {
  return (
    <div>
        {props.images && //이 부분 추가
          props.images.map((image, index) => (
            <div key={index}>
              <img
                style={{ width: "250px", height: "120px" }}
                src={`http://localhost:5000/${image}`}
              />
            </div>
          ))}
    </div>
  );
}

export default Test;