Child setState 后组件不会更新新的 props

Question

我正在使用 google-map-react 模块，传递我希望在 API 调用后更新的中心坐标。它们作为道具从 parent 组件的状态传入。但是，当我更新 parent 组件中的状态时， child 组件 () 不会更新，并且我还在我的控制台中看到以下警告： GoogleMap: defaultCenter prop changed. You can't change default props.

我期待 child 到 re-render，但这并没有发生。有什么想法吗？

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

Child setState 后组件不会更新新的 props

Child component won't update with new props after setState

javascript

reactjs

react-jsx