子ステートメントがsetState後に新しい小道具で更新されない

Question

私はAPIコールの後に更新したい中心座標を渡してgoogle-map-reactモジュールを使用しています。彼らは親コンポーネントの状態から小道具として渡されています。しかし、親コンポーネントの状態を更新すると、子コンポーネント（）は更新されず、コンソールに次の警告が表示されます。GoogleMap: defaultCenter prop changed. You can't change default props.

私は子供に再レンダリングを期待していましたが、起こっていない。何かご意見は？

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 

Answer 1

エラーは何が間違っていると言いますが、デフォルトを変更することはできません。 defaultCenterを一度設定してから、動的状態変数centerを使用してください。変更する必要がある場合は、defaultZoomとzoomと同じことです。