zeakd / react-naver-maps

React Navermaps API integration for modern development.
https://zeakd.github.io/react-naver-maps/
119 stars 23 forks source link

한페이지에서 한개 이상 지도 생성 관련 #110

Closed siyong84 closed 11 months ago

siyong84 commented 11 months ago

현재 한 페이지에서 두개의 지도를 생성하여 구현하는 중에 페이지가 언마운트 시 destory 관련 오류가 발생하고 있습니다. (버전 0.1) (지도를 1개만 생성했을 경우 오류 없음.)

한 페이지에서 여러개의 지도를 생성하는 예제 코드를 제공 받을 수 있을까요?

참고로 아래는 디버깅 시 콘솔 내용입니다. [콘솔] image

siyong84 commented 11 months ago

아래는 openapi/v3/maps.js 파일의 destroy 부분입니다.

디버깅 해본 결과

맨 하단에서 o.Map 배열 크기 만큼 순회 하면서 id가 같으면 제거하는 로직으로 보입니다. 해당 로직에서 o.Map 배열이 1개 이상인 경우 배열의 길이가 변경되어 t.id (t === undefined) 에 접근하면서 오류가 발생하는 것 같습니다.

해당 부분이 변경된 것인가요? 얼마전까지만 해도 오류가 없었던 것으로 기억합니다.

[문제 부분] o.forEach(o.Map.instances, function(t, i) { t.id === e.id && o.Map.instances.splice(i, 1) })

[openapi/v3/maps.js 파일의 destroy] destroy: function(t) { var e = this , i = t || !1; this._resizeListener && (Xt.removeDOMListener(this._resizeListener), this._resizeListener = null, delete this._resizeListener), this._resizeMapListener && (Xt.removeListener(this._resizeMapListener), this._resizeMapListener = null, delete this._resizeMapListener), this._mapView.destroy(), this._mapAction.destroy(), this._mapOptions.destroy(), this._rtsVersionLoader.stop(); var n = this.getElement(); if (n.innerHTML = "", i) { n.style.backgroundImage = 'url("' + F + '/auth_fail.png")', n.style.backgroundPosition = "center center"; try { n.style.backgroundSize = "256px 256px" } catch (t) {} } else n.style.background = "none"; o.forEach(o.Map.instances, function(t, i) { t.id === e.id && o.Map.instances.splice(i, 1) }) },

zeakd commented 11 months ago

안녕하세요 @siyong84 님 작성주신 부분은 네이버 지도팀에서 관리하는 부분으로 본 라이브러리와는 관련있는 부분이 아닙니다.

혹시 NaverMap 컴포넌트를 사용중이시라면 본 라이브러리에서는 map 에서 unmount 시에 destroy를 호출하도록 작성되어있는데 별도로 destroy를 호출 하고 있다면 하지 않으셔도 됩니다.

여전히 react-naver-maps 와 관련된 이슈라고 생각되신다면 재현가능한 코드와 함께 이슈를 다시 오픈 부탁드립니다. 🙇