在setState之后，子組件將不會使用新的道具進行更新

Question

我正在使用google-map-react模塊，傳遞我想在API調用后更新的中心坐標。 它們是作為道具從父組件的狀態傳入的。 但是，當我更新父組件中的狀態時，子組件（）不會更新，並且在控制台中我還會看到以下警告： GoogleMap: defaultCenter prop changed. You can't change default props. 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相同，以防您需要更改它。