在setState

Question

我正在使用google-map-react模块，传入我希望在API调用后更新的中心坐标。它们作为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相同，以防您需要更改。