javascript - 子组件不会在 setState 之后更新新的 props

Question

我正在使用 google-map-react 模块，传递我希望在 API 调用后更新的中心坐标。它们作为 Prop 从父组件的状态传入。但是，当我更新父组件中的状态时，子组件 () 不会更新，而且我还在控制台中看到以下警告:GoogleMap: defaultCenter prop changed。您无法更改默认 Prop 。

我期待 child 重新渲染，但那没有发生。有什么想法吗？

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 相同，以防您需要更改它。