오디약(실전프로젝트) 트러블슈팅 - 데이터 비동기 처리

오류 내역

---

오류가 발생한 경로

storeLocation.forEach에서 location 객체의 latitude와 longitude값을 읽을 때 undefined가 나타나는 문제가 발생

• 오류 발생된 코드
• storeLocation.forEach(location => { const marker = new kakao.maps.Marker({ position: new kakao.maps.LatLng(location.latitude, location.longitude), image: markerImage, });

---

오류를 해결하기 위해 시도해본 것들

시도1

State에게 들어올 값의 타입을 미리 알려줘서 undefined가 나타나지 않고 [] 빈배열 상태로 들어가게 한다.

const [date, setData] = useState({});

이렇게 변경해봤으나 에러코드는 동일하게 발생함

시도2

Optional Chaining ?(물음표) 연산자 사용하기

storeLocation.forEach(location => {
  const marker = new kakao.maps.Marker({
    position: new kakao.maps.LatLng(location.latitude, location.longitude),
    image: markerImage,
  });

?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환하기 때문에 결국에는 값이 undefined가 들어가서 동일한 에러가 나게됨