React-google-maps redux – 如何在获取新位置时居中地图？

这是整个地图组件的代码：

const GettingStartedGoogleMap = withGoogleMap(props => (

  <GoogleMap
    ref={props.onMapLoad}
    defaultZoom={18}
    defaultCenter={props.defCenter}
    onClick={props.onMapClick}
  >
    {props.markers.map((marker,i) => (
      <Marker
        key={i}
        position={marker.location}
        time={marker.time}
        onClick={() => props.onMarkerClick(marker)}
      >
        { marker.isShown &&
          <InfoWindow onCloseClick={() => props.onMarkerClick(marker)}>
             <div className="marker-text">{marker.time} </div>
          </InfoWindow>
        }
      </Marker>

    ))}
  </GoogleMap>
));

class GettingStartedExample extends Component {

  componentDidMount(){
    this.props.fetchMarkers();
    console.log("MONT");
    console.log(this.props.markers.length);

  }
  componentWillReceiveProps(){
    console.log(this.props.markers);
    console.log(this.props.markers.length);
  }

  state = {
     markers: this.props.markers,center: {lat: 50.07074,lng: 19.915718},};

  handleMapLoad = this.handleMapLoad.bind(this);
  handleMarkerClick = this.handleMarkerClick.bind(this);

  handleMapLoad(map) {
    this._mapComponent = map;
    if (map) {
      console.log(map.getZoom());
    }
  }

  handleMarkerClick(targetMarker) {
    /*
     * All you modify is data,and the view is driven by data.
     * This is so called data-driven-development. (And yes,it's now in
     * web front end and even with google maps API.)
     */
    const nextMarkers = this.state.markers.filter(marker => marker !== targetMarker);
    if(targetMarker.isShown==true)
    {
        targetMarker.isShown=false;
    }
    else
    {
        targetMarker.isShown=true;
    }
    this.setState({
      markers: nextMarkers,center: {lat: 5.07074,lng: 19.915718}
    });
  }

  render() {
    const markers = this.props.markers.map((marker,i) => {
      return (
          <Marker key={i} position={marker.location} time={marker.time} onClick={this.handleMarkerClick} />
        )});
    var centerPos;
    var lastMark;
    if(markers[markers.length-1]!== undefined)
        {
          centerPos=markers[markers.length-1].props.position;
          lastMark=markers[markers.length-1].props;
          console.log(centerPos);
        }
    else {
          centerPos={lat: 5.07074,lng: 19.915718};
        }
    return (
      <div className='container map-container'>
        <GettingStartedGoogleMap
          containerElement={
            <div style={{ height: `100%` }} />
          }
          mapElement={
            <div style={{ height: `100%` }} />
          }
          onMapLoad={this.handleMapLoad}
          markers={this.props.markers}
          onMarkerClick={this.handleMarkerClick}
          defCenter={this.state.center}
          lastMarker={lastMark}
        />
      </div>
    );
  }
}

GettingStartedExample.propTypes={
  markers: React.PropTypes.array.isRequired,fetchMarkers: React.PropTypes.func.isRequired
}

function mapStateToProps(state){
  return{
    markers:state.markers
  }
}

export default connect(mapStateToProps,{fetchMarkers})(GettingStartedExample);

可能我必须将中心状态设置为this.props.markers中的最后一个对象,我试着在componentWillReceiveProps()上做,但我不知道怎么做.我也在这里尝试了render()：

if(markers[markers.length-1]!== undefined)
        {
          centerPos=markers[markers.length-1].props.position;
          lastMark=markers[markers.length-1].props;
          console.log(centerPos);
        }
    else {
          centerPos={lat: 5.07074,lng: 19.915718};
        }

并试图将其传递给该州,但它没有奏效.我确信解决方案很简单,但我没有使用React的经验.如果它有用,我将添加actions.js的代码,其中定义了用于获取标记的redux操作：

export const SET_MARKERS='SET_MARKERS';

/*markers*/
export function setMarkers(markers){
  return{
    type:SET_MARKERS,markers
  }
}

export function fetchMarkers(){
  return dispatch => {
    fetch('/api/markers')
      .then(res=>res.json())
      .then(data=>dispatch(setMarkers(data.markers)));
    ;
  }
}