地理信息定位传单中的组件响应v3 --每次刷新时不必要的重复。

Question

我目前使用的传单在反应(v3)，您需要添加组件，以使他们在地图上。这是我得到的不需要的结果输出(绿色的圆圈是重复的，也不要点击)：地图渲染图像

这在每个地图交互上都是重复的。我不知道如何修复它，并假定是库才是问题所在，因为没有其他组件复制这种行为。如果它不能修复，一个替代方案是受欢迎的--只要它与传单兼容--反应v3。简单地说：-防止在每个地图渲染中重复。Geo在浏览器中找到具有权限的用户(在第一次加载时，如果用户手动移动，则通过单击按钮重新定位/飞到)

import { useMap } from "react-leaflet";
import Locate from "leaflet.locatecontrol";
import "leaflet.locatecontrol/dist/L.Control.Locate.min.css";
import * as L from "leaflet";

const UserLocate = () => {
  const map = useMap();

  var lc = L.control
    .locate({
      position: "topright",
      strings: {
        title: "Show me where I am, yo!",
      },
    })
    .addTo(map);
  return null;
};

export default UserLocate;

/====================================================/

import EsriLeafletGeoSearch from "react-esri-leaflet/plugins/EsriLeafletGeoSearch";
import {
  MapContainer,
  Marker,
  TileLayer,
  Popup,
  ZoomControl,
  LayersControl,
  useMapEvents,
  useMapEvent,
  useMap,
} from "react-leaflet";

    import { Container, Button, Form, Row, Nav } from "react-bootstrap";
    import "leaflet/dist/leaflet.css";
    import "esri-leaflet-geocoder/dist/esri-leaflet-geocoder.css";
    import L from "leaflet";
    import { BiMapPin } from "react-icons/bi";
    import UserLocate from "./ProfilePage/UserLocate";


function GeneralMap() {
  const defaultZoom = 14;
        <MapContainer
          center={[48.856614, 2.3522219]}
          zoom={defaultZoom}
          style={{ height: 400, width: "100%" }}
        >
          <LayersControl>
            <BaseLayer checked name="Standard">
              <TileLayer
                attribution='"<a href=\"https://www.jawg.io\" target=\"_blank\">&copy; Jawg</a> - <a href=\"https://www.openstreetmap.org\" target=\"_blank\">&copy; OpenStreetMap</a>&nbsp;contributors"'
                url="https://{s}.tile.jawg.io/jawg-streets/{z}/{x}/{y}{r}.png?access-token="
              />
            </BaseLayer>
            <BaseLayer name="Black and White">
              <TileLayer
                attribution='"<a href=\"https://www.jawg.io\" target=\"_blank\">&copy; Jawg</a> - <a href=\"https://www.openstreetmap.org\" target=\"_blank\">&copy; OpenStreetMap</a>&nbsp;contributors"'
                url="https://{s}.tile.jawg.io/jawg-light/{z}/{x}/{y}{r}.png?access-token="
              />
            </BaseLayer>
          </LayersControl>
             <EsriLeafletGeoSearch
            position="topleft"
            useMapBounds={false}
            eventHandlers={{
              requeststart: () => console.log("Started request..."),
              requestend: () => console.log("Ended request..."),
              results: (r) => console.log(r),
            }}
          />
          <UserLocate />
        </MapContainer>

  );
}

export default GeneralMap;

Answer 1

如果您需要运行一次代码，请将其放在useEffect中，如下所示：

​

useEffect(() => {
  //Code to run once
}, []);

​