React-google-maps re-rendering Problem

Question

Ich habe einige Probleme mit dem react-google-maps Npm-Modul.

Erste Render, funktioniert wie ein Charme. Beim Rendern der Map-Komponente bekomme ich den klassischen Google-Maps-Fehler.

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

Weil das Kartenobjekt beim Rendern nicht verfügbar ist?

Mein Google-Maps Karte Component

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 

und ich verwende die Komponente wie folgt aus:

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

dies, weil die Google-Maps-Modul reagiert nicht ist Aushängen die Komponente richtig oder ist es etwas, was ich getan habe?

Das folgende ist innerhalb des Kopfes

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

EDIT

Versucht, es zu lösen eine nicht reagieren-redux Weise, und dies ist keineswegs eine Lösung bedeutet, da es die Fehlermeldung erzeugt: 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.

Aber immer noch wird die Karte richtig rendert. Ich habe versucht, dies zu tun, die reducx Art und Weise zu rufen übergeben prop Funktionen & Zustand und setzen Sie die {map: Abschnitt} in den Zustand, übergeben Sie es aus der aufrufenden Ansicht. Löse nichts und führte zu der gleichen Fehlermeldung, obwohl es mit setTimeout

verzögert wurde. Ich bin hier irgendwie stecken geblieben, weiß nicht, wie man das löst.

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

Die Lösung für die zweite Bearbeitung war die setTimeout() Aufruf in der componentWillUnmount() Funktion zu löschen.

Sie immer haben Intervalle & Timeouts zu löschen, wenn die Komponente Aushängen ist.

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

Diese Lösung ist keine gute und nicht in Einklang mit dem react-redux-Workflow. Aber es funktioniert.