javascript - 如何将react-google-maps中的lat/lng附加到this.state.markers

Question

我已经实现了:

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

我正在尝试使用 arrOfAdds 数组中的任何内容基本上更新 this.state.markers (一个数组，其中包含我所有的纬度/经度，其中引脚将被删除)，但我想我无法更新它。状态标记？似乎当我在函数中运行调试器时，它会跳过 this.props.properties.map(... 并直接进入 arrOfAdds.map... code> 从一开始就是一个空数组，不附加任何内容，然后通过 this.props.properties.map(... 创建一个正确填充的 arrOfAdds。

对如何执行此操作相当困惑，希望得到帮助。

Answer 1

geocoder.geocode很可能是一个异步函数，因此这意味着您的附加代码在您收到实际数据之前运行。如果您将该代码移动到地理编码回调中，它可能会被修复(您可以简单地执行 this.state.markers.push 并完全跳过 arrOfAdds 集合。(请注意，顺便说一句，闭包尚未绑定(bind)到此!所以最好使用箭头函数或绑定(bind))

注意如果您的示例来自 React 组件，请注意，直接修改 this.state 被认为是不好的做法，但应该使用 setState 。但如果你的标记是一个可观察的数组，那么这并不重要。