Реагировать - компонент Google Maps не рендерится после componentDidMount

Question

У меня просто проблемы с рендерингом Карт Google, когда происходит поиск (с почтовым индексом). Кажется, что карта отображает нулевой центр карты, а затем не выполняет повторную визуализацию после setState в componentDidMount(), так как карта отображается пустой / серый, но с жестким обновлением карта будет загружаться с почтовым индексом. Я пытался использовать componentWillMount() без какой-либо удачи, у кого-нибудь есть какие-либо предложения?

Это код для моей страницы поиска:

class SearchContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      map_centre: null
    };
  }

  componentDidMount() {
    const values = queryString.parse(this.props.location.search);
    axios
      .get("api/v1/search?postcode=" + values.postcode)
      .then(response => {
        var mapCentre = response.data.map_centre;
        this.setState({
          map_centre: mapCentre
        });
      })
      .catch(error => console.log(error));
  }

  render() {
    return (
      <div id="map" className="padding-left">
        <GoogleMapComponent
          townCenters={this.state.townCenters}
          schools={this.state.schools}
          supermarkets={this.state.supermarkets}
          hotels={this.state.hotels}
          airports={this.state.airports}
          trainStations={this.state.trainStations}
          map_centre={this.state.map_centre}
          onMapMounted={this.handleMapMounted}
          onDragEnd={this.handleMapChange}
          onZoomChanged={this.handleMapChange}
          onMarkerClick={this.handleAdspaceShow}
          googleMapURL={url}
          loadingElement={<div style={{ height: `100vh`, width: `100%` }} />}
          containerElement={<div style={{ height: `100vh`, width: `100%` }} />}
          mapElement={<div style={{ height: `100vh`, width: `100%` }} />}
        />
        <img
          src={mapSearch}
          id="map-search-button"
          onClick={this.toggleSearchInput}
        />
        <input
          id="map-search-input"
          className="form-control d-none"
          type="search"
          placeholder="Enter new location"
          aria-label="Search"
          onChange={this.handlePostcodeChange}
          onKeyPress={this.handleNewSearch}
        />
      </div>
    );
  }
}

Это код для моего компонента Google Maps:

const GoogleMapComponent = withScriptjs(
  withGoogleMap(props => (
    <GoogleMap
      defaultZoom={13}
      defaultCenter={props.map_centre}
      onDragEnd={props.onDragEnd}
      onZoomChanged={props.onZoomChanged}
      ref={props.onMapMounted}
    />
  ))
);

Answer 1

Будьте более конкретны с библиотекой, которую вы используете... вы добавили теги "google-maps-Reaction" и "Reaction-google-map", и обе они являются разными библиотеками...

google-maps-реакции = https://github.com/fullstackreact/google-maps-react

response-google-map = https://tomchentw.github.io/react-google-maps/

Во всяком случае, я вижу 2 варианта:

Решение 1:

Добавьте условие, которое отображает GoogleMapComponent, только если map_centre не равно NULL.

  render() {
    if(this.state.map_centre){
      return (
        <div id="map" className="padding-left">
          <GoogleMapComponent
            townCenters={this.state.townCenters}
            schools={this.state.schools}
            supermarkets={this.state.supermarkets}
            hotels={this.state.hotels}
            airports={this.state.airports}
            trainStations={this.state.trainStations}
            map_centre={this.state.map_centre}
            onMapMounted={this.handleMapMounted}
            onDragEnd={this.handleMapChange}
            onZoomChanged={this.handleMapChange}
            onMarkerClick={this.handleAdspaceShow}
            googleMapURL={url}
            loadingElement={<div style={{ height: `100vh`, width: `100%` }} />}
            containerElement={<div style={{ height: `100vh`, width: `100%` }} />}
            mapElement={<div style={{ height: `100vh`, width: `100%` }} />}
           />
          <img
          src={mapSearch}
          id="map-search-button"
          onClick={this.toggleSearchInput}
          />
          <input
          id="map-search-input"
          className="form-control d-none"
          type="search"
          placeholder="Enter new location"
          aria-label="Search"
          onChange={this.handlePostcodeChange}
          onKeyPress={this.handleNewSearch}
          />
      </div>);
     }
     return <div> Loading.. </div>;
  }

Решение 2:

Установите значение по умолчанию lat/lng (не ноль), прежде чем получите ответ.

constructor(props) {
    super(props);
    this.state = {
      map_centre: { lat: -34.397, lng: 150.644 }
    };
  }

Answer 2

defaultCenter будет использоваться картой только для начального рендеринга, поэтому это не окажет никакого эффекта, если вы измените это значение позже.

Если вы используете center вместо этого он будет работать как положено.

const GoogleMapComponent = withScriptjs(
  withGoogleMap(props => (
    <GoogleMap
      defaultZoom={13}
      center={props.map_centre}
      onDragEnd={props.onDragEnd}
      onZoomChanged={props.onZoomChanged}
      ref={props.onMapMounted}
    />
  ))
);