反应谷歌地图标记消失后组件重新渲染

Question

我遇到的问题与反应 - 谷歌 - 地图模块，即以标记和组件重新渲染。

这是该方案：

1. 与它的地图和2-3标记加载页面（OK）
2. 点击导航条上的标签 - >页面呈现在一个页面的应用程序时尚别的东西（OK）
3. 点击导航条，导致回地图上的标签 - >页面渲染地图，标记不会呈现。

我在国有控股标记数据和我为他们申请在onGoogleApiLoaded={({map, maps}) => this.renderMarkers(map, maps)}地图。

我设法在一秒钟的renderMarkers包装setTimeout来解决这个问题，它加载罚款这种方式。

我不喜欢这样的解决方案，我相信，我根本就没有做到这一点我应该。我相信标记尝试把自己未呈现在地图上，但它奇怪的是，即使withoutsetTimeout它为默认页面（可能是与反应组件的生命周期，我不知道）。

有没有办法附加属性onGoogleApiLoaded={({map, maps}) => this.renderMarkers(map, maps)}地图上被完全加载之后？或至少延缓它，直到我敢肯定，在地图载入，而不是秒的一些随机数100％。

编辑：我是用marker.setMap(map)方法分配标记和我只是想建立在标记的构造属性map: map但行为保持不变。

Answer 1

我得到这个想通了，我已经打破下来后，问题有点多。这个问题是由事实，我失去的是被关在地图组件（这是一个孩子具有导航栏的组件）的状态标记数据引起的。

因此，流动是这样的：

1. 因为一切都被渲染的第一次（包括标记）>一切加载罚款 - 首先呈现页面的。
2. 我渲染的另一个组件，前一个被破坏和丢失的状态。
3. 我重新呈现地图组件，但它没有状态，所以它没有数据标记使用。

自然的解决方案是高移动状态下一个级别到父和它向下传递的地图组件的道具，现在一切正常，因为它应该。

奖金：

我想提另外一件事，我不得不修复但在这个问题上是绊倒别人不会是一定有用：我是用通过我的页面的导航条路由（使用react-router-dom）。

当移动状态到父的水平越高，则参数将不被传递给<Route元件像这样：<Route path="/" component={Map} markerData={this.state.markerData}/>而是使用render属性是这样的：<Route exact path="/" render={props => <Map markerData={this.state.markerData}/>}使得Map组件获得的道具，而不是Router。

Answer 2

当你说你点击一个标签，页面呈现的别的东西，你可能正在卸载您的地图组件。如果你有保存在状态的标记，你说你可以在componentWillUnmount检查自己这一点。

componentWillUnmount() {
  console.log('Unmount');
}

如果控制台日志在控制台中显示，意味着你卸载的组件，然后在你的国家失去你有标记的数据。

现在，为了加载你的标记在地图上，你可以等待地图与componentDidMount完全加载。我不知道如何反应 - 谷歌 - 地图从反应小叶（地图组件我有经验）有所不同，但我猜地图上有，你通过它你坚持国家的标记属性。取而代之的是超时的，你应该使用componentWillMount或componentDidUnmount反应的生命周期方法，让您的标记数据。

componentDidMount() { // It should work with componentWillMount too
  this.fetchMarkersData();
}

fetchMarkersData() {
  // ... get your data
  this.setState({ markers: markersData });
}

render() {
  return (
    <MapComponent
      markers={this.state.markers}
    />
  );
}