javascript - react 谷歌地图未捕获类型错误 : Cannot read property 'overlayMouseTarget' of null

Question

我正在使用 react-google-maps 包，当离开包含 map 的页面时，我收到错误消息:

Uncaught TypeError: Cannot read property 'overlayMouseTarget' of null

这是 GoogleMap 组件的代码:

const GMap = withGoogleMap((props) => (
  <GoogleMap
    ref={props.onMapMounted}
    defaultZoom={12}
    zoom={props.zoom}
    onDragEnd={props.onZoomChanged}
    onZoomChanged={props.onZoomChanged}
    defaultCenter={props.defaultCenter}
    center={props.center}
  >
    {
      props.markers && props.markers.map((data, index) => (
        <OverlayView
          key={index}
          position={{
            lat: data.get('loc').get('geo').get('lat'),
            lng: data.get('loc').get('geo').get('lng'),
          }}
          mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
          getPixelPositionOffset={(width, height) => ({ x: -(width / 2), y: -(height) })}
        >
          <WnmMarker
            text={data.get('text')}
            highlight={data.get('highlight')}
          />
        </OverlayView>
      ))
    }
  </GoogleMap>
));

谁能告诉我是什么原因造成的？

谢谢!

Answer 1

看起来当你离开页面时， map 元素已经不存在了，但是绑定(bind)的事件还在!

根据 React 组件生命周期，我们可能希望在您的组件中包含以下一对:componentDidMount 和 * componentWillUnmount*

constructor(props) {
  super(props);
  // ...
}

componentDidMount() {
  // bind the event
}

componentWillUnmount() {
  // unbind the event
}

render() {
  // ...
}

我不知道你是否已经有了上面的一对来初始化你的 map 和它的事件。

但是，仍然有很多 google map 库，但不确定它们是否都根据 React Component Life Cycle 很好地处理了所有事件。下面还有一个，我也有基于它的简单指南:

我的向导:

Implementing google maps with react

How to incorporate <script> in React to add Google Maps instance

图书馆: https://github.com/istarkov/google-map-react

如果这仍然不是你想要的，请随时发布更多你的代码以供引用，然后我们可能会一起找到最好的方法