反応-グーグルマップ捕捉されない例外TypeErrorを：プロパティを読み取ることができません「overlayMouseTarget」ヌル

Question

の私が反応するとGoogleマップのパッケージを使用していますし、地図を持っているページを離れるとき、私はエラーメッセージが表示されます：

Uncaught TypeError: Cannot read property 'overlayMouseTarget' of null 

ここで

は、Googleマップのコンポーネントとのコードです：

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

ページを離れると、マップ要素は存在しなくなりましたが、バインドされたイベントはまだそこにあるようです。

コンポーネントのライフサイクルを反応させることにより、我々はしたいが、あなたのコンポーネントで、次のペアを持っていることがありますが、すでに上記のペアを持っている場合componentDidMountと* componentWillUnmount *

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

componentDidMount() { 
    // bind the event 
} 

componentWillUnmount() { 
    // unbind the event 
} 

render() { 
    // ... 
} 

私にはわかりませんマップとそのイベントを初期化するためのものです。

しかし、そこにはまだたくさんのGoogleマップライブラリがありますが、すべてがReact Component Life Cycleですべてのイベントを処理しているかどうかは不明です。そこ下の別の1だ、と私はまた、それに基づいて、簡単なガイドがあります。

マイガイド：

Implementing google maps with react

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

ライブラリ： https://github.com/istarkov/google-map-react

これはまだされていない場合あなたが望むものは、参考のためにあなたのコードを投稿してください。そして、一緒にベストな方法を見つけるかもしれません。