React-google-maps重新渲染問題

我在react-google-maps npm模塊中遇到了一些問題。React-google-maps重新渲染問題

第一次渲染，就像一個魅力。當重新渲染地圖組件時，我得到了經典的谷歌地圖錯誤。

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

因爲地圖對象在渲染時不可用？

我的谷歌-maps地圖組件

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

這是因爲谷歌與圖反應的模塊不卸載該組件是否正確或是我做過的事情？

以下是內部頭

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

EDIT

試圖來解決它的非反應-Redux的方式，這決不是一個解決方案，因爲它產生的錯誤消息： 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.

但仍然，地圖重新正確渲染。我試着用這種方式調用傳遞的prop函數&狀態，並將{map：section}設置爲狀態，並從調用視圖中傳遞給它。沒有解決一件事情，並導致相同的錯誤信息，即使它延遲了setTimeout

Im有點卡住在這裏，不知道如何解決這個問題。

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

來源

2016-03-24 JazzCat

第二編輯的解決方案是清除在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 
    } 
    }

該解決方案不是一個好的解決方案，也不符合react-redux工作流程。但它的工作。

來源

2016-03-25 13:21:36 JazzCat

React-google-maps重新渲染問題

回答

相關問題