위도/LNG의 반응 - 구글 -지도 I이 구현 한

Question

this.state.markers에 추가하는 방법 : 나는 기본적으로 this.state.markers를 업데이트하기 위해 노력하고있어

populateLocations() { 
    var arrOfAdds = [], 
     geocoder = new google.maps.Geocoder() 

    this.props.properties.map(function(property, i) { 
     if (geocoder) { 
     geocoder.geocode({ 
      'address': property.street 
     }, function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
      // debugger 
      arrOfAdds.push({ 
       position: { 
       lat: results[0].geometry.location.lat(), 
       lng: results[0].geometry.location.lng(), 
       }, 
       key: i, 
       defaultAnimation: 2, 
      }) 
      } 
     }); 
     } 
    }, this) 

    arrOfAdds.map(function(add, i) { 
    this.state.markers.push(add) 
    }) 

    console.log('arrOfAdds', arrOfAdds) 
    console.log('this.state.markers', this.state.markers) 
    } 

를 (배열을 어떤 내 lat/lngs 어디에 핀을 삭제됩니다) arrOfAdds 배열에 뭐든 함께,하지만 난 this.state.markers를 업데이트 할 수 없다고 생각해? 마치 함수에서 디버거를 실행하면 this.props.properties.map(...을 건너 뛰고 처음부터 빈 배열이므로 arrOfAdds.map...으로 가고 아무 것도 추가하지 않고 적절하게 채워지는 this.props.properties.map(...을 만듭니다. arrOfAdds.

이 작업을 수행하는 방법에 대해 상당히 혼란 스러우면 도움이 필요합니다.

Answer 1

geocoder.geocode는 대부분 비동기 함수이므로 추가 데이터가 으로 실행되고 전에 실제 데이터가 수신되었음을 의미합니다. 해당 코드를 지오 코드 콜백 내부로 이동하면 해당 코드가 고정되어있을 가능성이 있습니다 (간단히 this.state.markers.push을 수행하고 arrOfAdds 컬렉션을 완전히 건너 뛸 수 있습니다.) (클로저가 아직이 btw에 바인딩되어 있지 않으므로 화살표 함수 또는 바인딩을 사용하는 것이 가장 좋습니다)

당신의 예는 반응 구성 요소에서 경우

NB , 나쁜 관행이 직접 this.state을 수정하는 것으로 간주되지만 setState가 사용되어야한다. 그러나 마커가 관찰 배열이 있다면, 그것은 그리 중요하지 않습니다.