reactjs - 如何在 react-google-map 中删除所有标记而没有任何副作用？

Question

我正在使用 react-google-maps 组件。

因为我有很多标记要显示在谷歌地图上，所以我使用了 MarkerClusterer。

我可以选择或取消选择 ag-grid 表中的行以使标记显示在 react-google-map 上。

如果我全选，所有标记都包含在checkedIPs 中，如果我取消全选，所有标记都会从checkedIPs 中删除。

MapWithMarkers 组件仅在已检查 IP 中显示标记。

现在，添加标记可以正常工作，但删除标记（从 ag-grid 表中取消选择）并没有像我预期的那样工作。

这需要很长时间。

https://imgur.com/mTS9jcS

请帮我解决这个问题。代码如下。

const MapWithMarkers = compose(
  withStateHandlers(
    () => ({
      isOpen: -1
    }),
    {
      onToggleOpen: ({ isOpen }) => index => {
        return {
          isOpen: isOpen === index ? -1 : index
        };
      },
      handleMapClick: () => () => {
        return {
          isOpen: -1
        };
      },
      onMarkerClustererClick: () => markerClusterer => {}
    }
  ),
  withScriptjs,
  withGoogleMap
)(props => {
  return (
    <GoogleMap
      defaultZoom={props.zoomLevel}
      defaultCenter={props.center}
      onClick={props.handleMapClick}
    >
      {props.checkedIPs.length !== 0 ? (
        <MarkerClusterer
          onClick={props.onMarkerClustererClick}
          enableRetinaIcons
          gridSize={50}
        >
          {props.cache.map((location, index) => {
            if (props.checkedIPs.includes(location.ipAddress)) {
              return (
                <Marker
                  key={index}
                  position={{ lat: location.latitude, lng: location.longitude }}
                  onClick={() => props.onToggleOpen(index)}
                >
                  {props.isOpen === index && (
                    <InfoWindow
                      position={{
                        lat: location.latitude,
                        lng: location.longitude
                      }}
                      onCloseClick={() => props.onToggleOpen(index)}
                    >
                      <div>
                        <h6>IP Address: {location.ipAddress}</h6>
                      </div>
                    </InfoWindow>
                  )}
                </Marker>
              );
            }
          })}
        </MarkerClusterer>
      ) : (
        <MarkerClusterer />
      )}
    </GoogleMap>
  );
});

export default class MapContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      zoomLevel: 2,
      center: { lat: 14.397, lng: 160.644 },
      markers: [],
      checkedIPs: [],
      isOpen: -1
    };
  }

  componentWillReceiveProps(nextProps) {
    const { cache, checkedIPs } = nextProps;
    this.setState({
      markers: cache,
      checkedIPs: checkedIPs
    });
  }

  render() {
    return (
      <MapWithMarkers
        googleMapURL="..."
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: `100%`, width: `100%` }} />}
        mapElement={<div style={{ height: `100%` }} />}
        cache={this.state.markers}
        checkedIPs={this.state.checkedIPs}
        zoomLevel={this.state.zoomLevel}
        center={this.state.center}
      />
    );
  }
}
`````````



All markers should be removed very fast without any effect, 
but currently, as I navigate all markers and check if it is contained in checkedIPs, it stops for a while and then disappear.

标签： reactjsreact-google-mapsag-grid-react