2016-09-16 105 views
2

我正在使用google-map-react模塊,傳遞中心座標,我希望在API調用後更新該模塊。他們從母組件的狀態作爲道具傳入。但是,當我更新父組件中的狀態時,子組件()不會更新,並且我還在控制檯中看到以下警告:GoogleMap: defaultCenter prop changed. You can't change default props.setState後,子組件不會使用新的道具更新

我期待孩子重新呈現,但是沒有發生。有什麼想法嗎?

const React = require('react') 
const GoogleMap = require('google-map-react').default 

const MapPage = React.createClass({ 
    propTypes() { 
    return ({ 
     params: object 
    }) 
    }, 
    getInitialState() { 
    return ({ 
     zipSearch: this.props.params.zip || '90024', 
     initialCoordinates: [59.955413, 30.337844] 
    }) 
    }, 
    componentWillMount() { 
    $.get('www.APICALL.com', function (result)  { 
     var resources = JSON.parse(result); 
     this.setState({ 
     initialCoordinates: [parseFloat(resources[0].latitude), parseFloat(resources[0].longitude)] 
     }) 
    }.bind(this)); 
    }, 
    render() { 
    var initialCoordinates = {lat: this.state.initialCoordinates[0], lng: this.state.initialCoordinates[1]} 
    console.log(initialCoordinates) //this gets logged twice in console.log 
    return (
     <div className='map-container'> 
     <GoogleMap 
      defaultCenter={initialCoordinates} 
      defaultZoom={12}> 
     </GoogleMap> 
     </div> 
    ) 
    } 
}) 

module.exports = MapPage 

回答

2

該錯誤說明究竟出了什麼問題,您不能更改默認值。設置defaultCenter一次,然後在center上使用動態狀態變量。如果您需要更改,請使用defaultZoomzoom

+0

這是我的一個非常頭腦的錯誤..我一直認爲這是一個反應問題,不允許我改變道具傳遞給子組件。對不起,新進入者在這裏作出反應。我會學會更好地閱讀文檔..非常感謝! –

相關問題