react-google-maps 在 StrictMode 下不会卸载组件

Question

在附加的示例代码和框中，我有一个使用 react-google-maps 的地图。 当用 <React.StrictMode> 包裹地图时，它将停止卸载组件。

我看到 react-google-maps 卸载组件的方式通常是使用 instance.setMap(null) 将它们的映射设置为 null。我不明白为什么这种行为会在 StrictMode.

下中断

这是演示问题的代码和框： https://codesandbox.io/s/jv61orz64y

谢谢！
乌里

Answer 1

我遇到了同样的问题，在回购协议中遇到了你的问题，因此遇到了这个问题。我已经详细介绍了这个问题 a comment on your repo issue，但总结一下：

• react-google-maps 有点调皮，实际上在组件的构造函数中做了一些类似渲染的工作。在本例中，它初始化 google.maps.Marker 并调用 setMap。这具有将标记放在地图上的效果。
• 它从 componentWillUnmount
中的地图中移除标记
• 一个组件 可能 被构造但永远不会最终成为 mounted，当这种情况发生时，componentWillUnmount 永远不会被调用，因为没有任何要卸载的东西
• 这意味着如果组件已构建但从未安装，因此从未调用 componentWillUnmount，则标记永远不会从地图中移除
• 在 StrictMode 中，这种情况似乎会发生，请参阅下面的解释：

如果您查看 my fork of your demo，您会看到在非严格模式下，标记代理 (MyMarker) 被构建、安装、更新、卸载，然后如果您加载页面放大和重新安装然后缩小。然而，在严格模式下，构建了两个标记，但只安装了一个。所以这里发生的事情并不是在您放大时标记永远不会卸载，而是地图上始终有两个标记。一个通过构建但从未安装在地图上的 "orphaned"，以及一个完全在 React 控制下的。它确实正在被正确删除和重新添加。