当给定新的界限时，google-maps-react 将我置于海洋中央

如何解决当给定新的界限时，google-maps-react 将我置于海洋中央

我正在使用 google-maps-react 包，我正在尝试为我的地图设置边界。它们应该根据通过 props 传递给组件的值进行更改。它确实成功地做到了这一点，但是在我的网站第一次加载之后，而不是重新加载地图以便我可以看到所有标记，它只是让我处于 lat: 0.0 和 long: 0.0。如果我缩小，我可以看到我的所有标记，但地图不会自行调整大小。 它确实成功加载！只是不加载边界。请参阅下面的图片。

After I save my file and it reloads

After I leave the page and come back,or refresh

这是我尝试过的：

import { Map,Marker,GoogleApiWrapper } from "google-maps-react";

class MapExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      bounds: null
    };
    this.handleMapLoad = this.handleMapLoad.bind(this);
  }
  
  handleMapLoad() {
    const bounds = new this.props.google.maps.LatLngBounds();
    for (let loc of this.props.originsCoords) bounds.extend({ lat: loc.lat,lng: loc.lng });
    this.setState({bounds:bounds});
  }

  render() {
    return (
      <Map
        onReady={this.handleMapLoad}
        google={this.props.google}
        bounds={this.state.bounds}
        style={{width:'50%',height:'50%'}}
      >
        {this.props.originsCoords.map((loc,i) => (
          <Marker key={i} position={{ lat: loc.lat,lng: loc.lng }} />
        ))}
      </Map>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: "api-key"
})(MapExample);