Re-Googleマップの再レンダリングの問題

Question

react-google-maps npmモジュールに問題があります。

最初のレンダリングは、魅力のように動作します。 マップコンポーネントを再描画すると、古典的なgoogle-mapsエラーが発生します。

Uncaught TypeError: Cannot read property 'offsetWidth' of null 
Uncaught (in promise) TypeError: Cannot read property 'componentWillReceiveProps' of null(…) 

レンダリング時にマップオブジェクトが使用できないため、

私のグーグルマップマップコンポーネント

import React, { PropTypes } from 'react' 
import { GoogleMap, Marker, GoogleMapLoader } from 'react-google-maps' 
export class Map extends React.Component { 
    static propTypes = { 
    coordinates: PropTypes.object, 
    markers: PropTypes.array 
    }; 

    render() { 
    return (<section onloadstyle={{height: '300px'}}> 
     <GoogleMapLoader 
     containerElement={ 
      <div 
      {...this.props} 
      style={{ 
       height: '300px', 
       width: '100%' 
      }} 
      /> 
     } 
     googleMapElement={ 
      <GoogleMap 
      ref={(map) => console.log(map)} 
      defaultZoom={15} 
      defaultCenter={this.props.coordinates}> 
      {this.props.markers.map((marker, index) => { 
       return (
       <Marker key={index} {...marker} /> 
      ) 
      })} 
      </GoogleMap> 
     } 
     /> 
    </section>) 
    } 
} 

export default Map 

そして、私はこのようなコンポーネントを使用します。

var coordinates = {lat: this.props.item.delivery_address_lat, lng: this.props.item.delivery_address_lng} 
var map = this.props.item.delivery_address_lat !== 0 && this.props.item.delivery_address_lng !== 0 ? (<Row id='map'> 
     <Map markers={[{position: coordinates}]} coordinates={coordinates} /> 
</Row>) : '' 

このGoogleマップが反応したため、モジュールがアンマウントされていないですコンポーネントが正しくまたはそれは何か私がやったことですか？

それはエラーメッセージを生成するので、次は、ヘッド内部それを非反応-Reduxの方法およびこの問題を解決しようとした

<script src="https://maps.googleapis.com/maps/api/js?key=MY-KEY"></script> 

EDIT

は決して解決策です。 Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the Map component.

ただし、マップは正しく再レンダリングされます。渡された小道具関数&を呼び出し、州の{map：section}を呼び出しビューから渡すようにしました。遅れていたにもかかわらず、同じエラーメッセージが表示されました。setTimeout

ここに固執していますが、これを解決する方法がわかりません。

componentDidMount() { 
    this.setState({map: null}) 
    setTimeout(() => this.setState({ 
     map: <section onloadstyle={{height: '300px'}}> 
     <GoogleMapLoader 
     containerElement={ 
      <div 
      {...this.props} 
      style={{ 
       height: '300px', 
       width: '100%' 
      }} 
      /> 
     } 
     googleMapElement={ 
      <GoogleMap 
      ref={(map) => console.log(map)} 
      defaultZoom={15} 
      defaultCenter={this.props.coordinates}> 
      {this.props.markers.map((marker, index) => { 
       return (
       <Marker key={index} {...marker} /> 
      ) 
      })} 
      </GoogleMap> 
     } 
     /> 
    </section> 
    }), 300) 
    } 

    render() { 
    if (!this.state) { 
     return <span /> 
    } else { 
     return this.state.map 
    } 
    } 

Answer 1

秒編集するためのソリューションをcomponentWillUnmount()機能でsetTimeout()コールをクリアすることでした。

あなた常にコンポーネントがアンマウントされたときの間隔に&タイムアウトをクリアする必要があります。

componentDidMount() { 
    this.setState({map: null}) 
    this.timeout = setTimeout(() => this.setState({ 
     map: <section onloadstyle={{height: '300px'}}> 
     <GoogleMapLoader 
     containerElement={ 
      <div 
      {...this.props} 
      style={{ 
       height: '300px', 
       width: '100%' 
      }} 
      /> 
     } 
     googleMapElement={ 
      <GoogleMap 
      ref={(map) => console.log(map)} 
      defaultZoom={15} 
      defaultCenter={this.props.coordinates}> 
      {this.props.markers.map((marker, index) => { 
       return (
       <Marker key={index} {...marker} /> 
      ) 
      })} 
      </GoogleMap> 
     } 
     /> 
    </section> 
    }), 300) 
    } 

    componentWillUnmount() { 
    clearTimeout(this.timeout) 
    } 

    render() { 
    if (!this.state) { 
     return <span /> 
    } else { 
     return this.state.map 
    } 
    } 

このソリューションは、反応性の低下のワークフローには適していません。しかし、それは動作します。