使用React状态，如何在添加新标记之前从Google地图中删除标记？

debugcn 发表于 Dev

迈克尔·林奇

我有一个React应用程序，其中显示了带有一些标记的地图。通过单击可从Google Maps API获取新位置的按钮来刷新地图标记。我想在每次刷新时从地图上删除以前的位置标记。

import React, { useEffect, useState } from 'react';

function Map(props) {
  const [markers, setMarkers] = useState();

  function clearMarkers() {
    for(let i = 0; i < markers.length; i++) {
      markers[i].setMap(null);
    }
  }

  useEffect(() => {

    clearMarkers();

    if(props.locations.length) {
      const googleMarkers = [];

      for(let i = 0; i < props.locations.length; i++) {
        const marker = new window.google.maps.Marker({...});
        googleMarkers.push(marker);
      }

      setMarkers(googleMarkers);
    }
  }, [props.locations, props.map]);
}

我已经工作了，但是我收到了React的警告。

React Hook useEffect缺少依赖项：'clearMarkers'。包括它或删除依赖项数组

我需要依赖项数组，因此标记仅在有new时才刷新props.locations，但是当我将其包括在依赖项数组中时，会出现无限循环。

如何在添加新标记之前清除标记，而不用React发出警告？还是我不应该担心警告？

瓦迪姆·格雷米亚切夫（Vadim Gremyachev）

您可以考虑通过可变的ref对象存储标记（如此处所述）：

const prevMarkersRef = useRef([]);

区分以前的标记。locations道具更新后，清除先前的标记：

useEffect(() => {
    //clear prev markers 
    clearMarkers(prevMarkersRef.current); 

    //render markers
    for (let loc of props.locations) {
      const marker = createMarker({ lat: loc.lat, lng: loc.lng }, map);
      prevMarkersRef.current.push(marker);
    }
});

哪里

function createMarker(position, map) {
    return new window.google.maps.Marker({
      position: position,
      map: map
    });
  }

  function clearMarkers(markers) {
    for (let m of markers) {
      m.setMap(null);
    }
  }

这是一个演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。