反应-在componentDidMount

Question

发生搜索（带有邮政编码）时，我在Google Maps渲染方面遇到了麻烦。好像地图渲染了空的地图中心，然后在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 Maps组件的代码：

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

Answer 1

defaultCenter仅用于地图的初始渲染，因此，如果以后更改此值，它将没有任何效果。

如果您使用center道具，它将按预期工作。

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

Answer 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的条件。

beforeCreate

解决方案2：

设置默认的经/纬度（不为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>;
  }