0

私はこれに実装しました：

 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)
  }

私は基本的に this.state.markers (ピンがドロップされるすべての緯度/経度を含む配列) を arrOfAdds 配列にあるもので更新しようとしていますが、this.state.markers を更新できないと思います? 関数でデバッガーを実行すると、 をスキップしてthis.props.properties.map(...に直接移動するように見えますarrOfAdds.map...。これは最初から空の配列であり、何も追加せず、 を通過しthis.props.properties.map(...て適切に設定された arrOfAdds を作成します。

これを行う方法についてかなり混乱していますが、助けていただければ幸いです。

4

1 に答える 1

2

geocoder.geocode はおそらく非同期関数であるため、実際のデータを受け取る前に追加コードが実行されることを意味します。そのコードをジオコード コールバック内に移動すると、おそらく修正されます (単純にコレクションを完全this.state.markers.pushにスキップすることができarrOfAddsます) (クロージャはまだこのところでバインドされていないことに注意してください! したがって、アロー関数またはバインドを使用することをお勧めします)。

this.stateNB 例が反応コンポーネントからのものである場合、直接変更することは悪い習慣と見なされますが、setState使用する必要があることに注意してください。しかし、マーカーが観測可能な配列である場合、それは問題ではありません。

于 2016-10-07T08:04:50.263 に答える