TypeError : r.map is not a functiontroubleshooting2023. 12. 22. 14:55
목차
서론
이번 글은 "TypeError: r.map is not a function"에 대해 다루었다. 이번 문제 역시 프로젝트 파일 내부에서 발생하는 것으로 로컬에서는 잘 작동하지만 배포된 도메인에서만 발생했다.
오류 메시지
TypeError: r.map is not a function
Uncaught TypeError: r.map is not a function
r.map에서 r이라는 변수를 사용한 적이 없는데 왜 이런 에러가 발생하는지 이유를 모르겠어서 에러 메세지를 자세히 보다가 에러가 발생한 곳의 위치를 쭉 따라가다 보니 빌드 후 배포된 코드는 실제 코드와 똑같이 쓰는 것이 아니라 약간씩 이름이 다르게 작성되어진다는 것을 알게 되었고 본 코드 위치도 알게 되었다.
오류 코드
{probs && probs.map((element) => <AlgoProbs prob={element} key={element.id} />)}
언뜻 보기에는 문제가 없어보이지만 이렇게 작성하게 되면 probs가 비동기적으로 로드될 때 probs에 값이 있어도 그 초기값이 배열 형태를 갖추고 있지 않을 수가 있다고 한다. 이 때 데이터가 로드되기 전에 .map이 호출되는 것을 방지하는 과정이 필요하다.
해결코드
{probs && Array.isArray(probs) && probs.map((element) => <AlgoProbs prob={element} key={element.id} />)}
probs가 배열 형태일 때 .map을 호출하도록 바꿔주어서 문제를 해결하였다.
Ways in which things go right are special cases of the ways in which things go wrong.
일이 잘 풀리는 것은 일이 잘못되는 경우 중에서 아주 특별한 경우이다.
728x90
반응형
LIST
'troubleshooting' 카테고리의 다른 글
@kdj :: Childev'note
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!