我在使用 react-google-maps 模块时遇到问题，即标记和组件重新渲染。
这是场景:
- 加载带有 map 和 2-3 个标记的页面(确定)
- 单击导航栏上的选项卡 -> 页面以单页应用程序方式呈现其他内容(确定)
- 单击导航栏上返回 map 的选项卡 -> 页面呈现 map 但未呈现标记。
我在状态中保存标记数据，并将它们应用到 onGoogleApiLoaded={({map, maps}) => this.renderMarkers(map, maps)} 中的 map 。
我设法通过将 renderMarkers 包装在一秒的 setTimeout 中解决了这个问题，并且以这种方式加载正常。
我不喜欢这个解决方案，我相信我只是没有按照我应该的方式去做。我相信标记会尝试将自己放置在未呈现的 map 上，但奇怪的是即使没有 setTimeout 它也适用于默认页面(可能与 react 组件生命周期有关，我不知道).
有没有办法在 map 完全加载后附加属性 onGoogleApiLoaded={({map, maps}) => this.renderMarkers(map, maps)} ？或者至少延迟它，直到我 100% 确定 map 已加载，而不是随机数秒。
编辑:我正在使用 marker.setMap(map) 方法分配标记，我只是尝试在标记的构造函数中设置属性 map: map 但是行为保持不变。
最佳答案
在我进一步分解问题之后，我明白了这一点。问题是由于我丢失了保存在 Map 组件状态中的标记数据(它是具有导航栏的组件的子组件)。
所以流程是这样的:
- 首次呈现页面 -> 所有内容都加载正常，因为所有内容都是第一次呈现(包括标记)。
- 我渲染另一个组件，前一个组件被破坏并失去状态。
- 我重新渲染了 Map 组件，但它没有状态，因此它没有供标记使用的数据。
自然地，解决方案是将状态向上移动一个级别到父级，并将其作为 Map 组件的 prop 向下传递，现在一切正常。
奖励:
我想提一下我必须解决的另一件事，但对于其他偶然发现此问题的人来说不一定有用:
我正在使用导航栏来浏览我的页面(使用 react-router-dom )。
将状态上移到父级时，参数不会传递给 <Route像这样的元素:<Route path="/" component={Map} markerData={this.state.markerData}/>而是使用 render属性如下:<Route exact path="/" render={props => <Map markerData={this.state.markerData}/>}这样 Map组件获取 Prop 而不是 Router .
关于javascript - 组件重新渲染后 react 谷歌地图标记消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50734258/