React-google-maps yeniden oluşturma sorunu

Question

react-google-maps npm modülüyle ilgili bazı sorunlar yaşıyorum.

İlk işlem, bir çekicilik gibi çalışır. Harita bileşenini yeniden oluştururken klasik google-map hatasını aldım.

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

Eşleme sırasında harita nesnesi kullanılamıyor mu?

Benim google-maps Harita Bileşeni

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 

Ve ben böyle bileşeni kullanmak:

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>) : '' 

bu google-haritalar-tepki nedeniyle modül unmounting değil mi bileşen düzgün ya da yaptığım bir şey mi? Aşağıdaki

kafasının içinde olan

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

DÜZENLEME

olmayan bir tepki-Redux bir şekilde çözmek için denenmiş ve bu da bir hata mesajı üretir yana bir çözeltisi yapılması mümkündür 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.

Yine de harita doğru şekilde yeniden oluşturuluyor. Bunu redux olarak çağırmayı denedim. & durumundaki prop işlevlerini geçtikten sonra durumdayken {map: section} ifadesini arayan görüntüden geçirerek ayarlayın. Bir şey çözmedi ve aynı hata iletisiyle sonuçlandı, ancak bu hata, bu sorunu nasıl çözdüğümü bilmiyorum bile, setTimeout

Burada ertelenmiş olsa bile.

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

ikinci düzenleme için çözüm componentWillUnmount() işlevinde setTimeout() aramayı temizlemek için oldu.

Sen hep bileşeni Ayırma işlemi olduğunda aralar & zaman aşımları temizlemek zorunda.

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 
    } 
    } 

Bu çözelti iyi değildir ve in-line reaksiyona-Redux iş akışı ile değil. Ama işe yarıyor.