我正在使用 react-leaflet，并且已经创建了一张地图，其中已经放置了标记。我只是想创建一个函数，当单击按钮时，添加一个新标记。但我收到此错误： Uncaught TypeError：无法读取未定义的属性（读取“marker”）

注意： filterGare1 部分​​和 gare 变量对应于从 JSON 文件中检索到的经度和纬度数据

这是我的代码：

import "./App.css";
import "leaflet/dist/leaflet.css";
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";
import { iconPerso } from "./iconMarker";
import { map, L} from "leaflet";
import dataGares from "./data/referentiel-gares-voyageurs.json";


const center = [46.227638, 2.213749];

const filterGare1 = dataGares.filter(
  (gare) => gare.fields.segmentdrg_libelle === "a"
);



function getLayers(){
  var newMarker = new L.marker([42.5020902, 2.1131379])
  .addTo(map)
  .bindPopup("MARKER TEST");

}

export default function App() {
  const [, updateState] = React.useState();
  const forceUpdate = React.useCallback(() => updateState({}), []);

  let niveau = filterGare1;

  return (
    <MapContainer
      center={center}
      zoom={6}
      style={{ width: "100vw", height: "100vh" }}
    >
      <TileLayer
        url="https://api.maptiler.com/maps/basic/256/{z}/{x}/{y}.png?key=F4ZxF5g8ioWE3GlTx3i0#-0.2/0.00000/76.51878"
        attribution='<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'
      />

      {niveau.map((gare) => (
        <Marker
          key={gare.recordid}
          position={[
            gare.fields.latitude_entreeprincipale_wgs84,
            gare.fields.longitude_entreeprincipale_wgs84,
          ]}
          icon={iconPerso}
        >
          <Popup>
            <h3> {"Name : " + gare.fields.gare_alias_libelle_noncontraint} </h3>
            <button onClick={getLayers}>get Layers</button>
          </Popup>
        </Marker>
      ))}

      <GetZoom />
    </MapContainer>
  );
}

我在网上搜索答案，但没有一个提出的解决方案可以解决我的问题。 有人谈论 markerCluster -> Leaflet 1.7：L.MarkerClusterGroup 不是函数 但这实际上与我想要做的事情不符。我只想在地图上添加一个标记，但我不知道我的错误可能出在哪里，有人能看出来吗？提前谢谢了