Question

我的应用程序包含一个Google地图，该地图根据API的坐标显示标记。加载应用后，会发出API请求并获取一些坐标以在屏幕上显示。 API数据映射到<Marker />组件。

问题：将鼠标悬停在任何标记上后，将再次调用render方法，并且标记会快速闪烁。为什么？

Map.js

state = {
    center: { lat, lng },
    zoom: defaultZoom,
    showingInfoWindow: false,
    selectedMarker: ""
  };

onMarkerHover = (e, marker) => {
    this.setState({
      selectedMarker: marker.recordid,
      showingInfoWindow: true
    });
    this.onSendMarkerInfoToParent();
  };

render() {
    const data = this.props.searchedResponse;
    console.log("rerendering"); // printed in console on every hover event
    const Markers = props =>
      data
        ? data.data.records.map(marker => {
            return (
              <Marker
                position={{ lat: marker.fields.geom.coordinates[1], lng: marker.fields.geom.coordinates[0] }}
                key={marker.recordid}
                onClick={e => this.onMarkerClick(e, marker)}
                onMouseOver={e => this.onMarkerHover(e, marker)}
              >
                {this.state.showingInfoWindow && this.state.selectedMarker === marker.recordid && (
                  <InfoWindow
                    className="info-window"
                    position={{ lat: marker.fields.geom.coordinates[1], lng: marker.fields.geom.coordinates[0] }}
                  >
                    <div>{rateTimeCalc(marker)}</div>
                  </InfoWindow>
                )}
              </Marker>
            );
          })
        : null;
    return (
      <div className="map-container">
        <LoadScript googleMapsApiKey={process.env.REACT_APP_GOOGLE_KEY}>
          <GoogleMap id="map" center={this.state.center} zoom={this.state.zoom}>
            <Markers />
          </GoogleMap>
        </LoadScript>
      </div>
    );
  }

App.js

onSendMarkerInfoToParent = e => {
    console.log("parent", e);
  };

Answer 1

这是由于React应用程序的生命周期。您已经在设置状态的代码中映射了onHover方法。

onMouseOver={e => this.onMarkerHover(e, marker)}

onMarkerHover = (e, marker) => {
    this.setState({
      selectedMarker: marker.recordid,
      showingInfoWindow: true
    });
    this.onSendMarkerInfoToParent();
  };

此setState导致重新渲染。

在React中，无论何时设置组件的状态。 render方法将自动执行。您可以阅读本文以供参考：https://medium.com/react-ecosystem/react-components-lifecycle-ce09239010df。

Answer 2

google-maps-react和Markers重新呈现的解决方案：

1。为所有标记创建包装器PureComonent。

2。为所有标记维护一个“信息窗口”。

工作示例：

https://codesandbox.io/s/falling-wave-kjcee

反应-将鼠标悬停在动态生成的组件调用渲染方法上

2 个答案: