만들어보고싶었던 것을 만들며 리액트를 공부하던 도중
막히는 부분이 생겨서 2~3일 찾다가 안되서 질문드립니다.
componentDidMount() {
const {pos} = this.props;
console.log(pos, pos.mylat, pos.mylng) // 비정상
}
render() {
const { pos } = this.props;
return (
<>
<div id="map">1</div>
{pos.mylat}, {pos.mylng} // 정상
</>
)
}
이 부분입니다. 자신의 위치를 저장한 변수 mylat, mylng 두개가 웹상에선 좌표로 표기가 잘됩니다.
하지만 ComponentDidMount() 에서 저걸 저대로 실행하면 맨 처음 초기화해줬던 값인 0이 나옵니다.
export default class posstore {
@observable mylat = 0;
@observable mylng = 0;
@action getPosition2 = () => {
navigator.geolocation.getCurrentPosition(me => {
this.mylat = me.coords.latitude;
this.mylng = me.coords.longitude;
});
};
}
// mobx store
해당 코드에 표기가 안되어있지만 위에 inject, observer 는 해놓은 상태입니다.
맨처음에 mobx 를 쓰지 않고 진행하다가 똑같은 이유로 막혀서 mobx를 사용했는데,
같은 방식으로 막혀서 질문드립니다.
제가 어떤 것을 놓치고 있는 걸까요?
검색 키워드라도 알려주시면 감사하겠습니다 !!
