子组件不会在setState之后使用新的props进行更新

Child component won't update with new props after setState

本文关键字：props 更新 组件 之后 setState      更新时间：2023-09-26

我使用的是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

错误说明了错误所在，您无法更改默认设置。设置defaultCenter一次，然后在center上使用动态状态变量。同样的事情与defaultZoom和zoom，如果你需要改变它。

相关文章：