React - 谷歌地图组件在 componentDidMount 之后未呈现答案

【问题标题】：React - Google Maps component not rendering after componentDidMountReact - 谷歌地图组件在 componentDidMount 之后未呈现
【发布时间】：2019-01-08 01:48:02
【问题描述】：

当搜索（使用邮政编码）发生时，我的 Google 地图渲染出现问题。似乎地图正在渲染空地图中心，然后在 componentDidMount() 中的 setState 之后不重新渲染，因为地图呈现为空白/灰色，但通过硬刷新，地图将与邮政编码一起加载。我试过使用 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 地图组件的代码：

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

【问题讨论】：

您是否尝试在GoogleMapComponent 组件上使用center 属性而不是map_centre？
@Tholle 你能详细说明你的意思吗？
我自己没有使用过这个库，但是looking at the documentationGoogleMap 组件似乎没有map_centre 属性，而是center 属性。
我认为它略有不同，因为我没有对 defaultCenter 进行硬编码。我的 componentDidMount 函数中有一个 defaultCenter
啊，我明白了，以为是在每次渲染之后。非常感谢！

标签： javascript reactjs react-google-maps google-maps-react

【解决方案1】：

defaultCenter 只会被地图用于初始渲染，因此如果您稍后更改此值，它将不会有任何效果。

如果您改用 center 属性，它将按预期工作。

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

【讨论】：

【解决方案2】：

更具体地说明您正在使用的库...您添加了标签“google-maps-react”和“react-google-map”，它们都是不同的库...

google-maps-react = https://github.com/fullstackreact/google-maps-react

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

无论如何，我可以看到 2 个选项：

解决方案 1：

添加一个仅在 map_centre 不为 null 时才呈现 GoogleMapComponent 的条件。

  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（非 null）。

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

【讨论】：