김치찌개
87
2020-03-24 23:43:34
2
149

React Props 관련 질문드립니다.


만들어보고싶었던 것을 만들며 리액트를 공부하던 도중


막히는 부분이 생겨서 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를 사용했는데,
같은 방식으로 막혀서 질문드립니다.

제가 어떤 것을 놓치고 있는 걸까요?

검색 키워드라도 알려주시면 감사하겠습니다 !!
0