setState後，子組件不會使用新的道具更新

我正在使用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

來源

2016-09-16 Michael Du

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

來源

2016-09-16 18:30:41 azium

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

setState後，子組件不會使用新的道具更新

回答

相關問題