React传单：Array.map函数未将Marker组件呈现给Map

如何解决React传单：Array.map函数未将Marker组件呈现给Map

我正在尝试向地图中添加两个<Marker/>组件，我正在使用useState挂钩来跟踪标记。

用户点击地图时，会将当前点的当前经度和纬度添加到表示标记的数组中。

记录标记数组会显示两个确实包含各自的经度的对象。

[LatLng,LatLng]
0: LatLng {lat: 40.80694139700055,lng: -73.94622242203457}
1: LatLng {lat: 40.668585096493445,lng: -73.48779014853261}
length: 2

这是我的地图组件：

import React,{ useState,useEffect,useRef } from 'react'
import { Map,TileLayer,Marker,Popup } from 'react-leaflet';
import LocateControl from '../LocateControl/LocateControl.jsx';
import MapboxLayer from '../MapboxLayer/MapboxLayer.jsx';
import L from "leaflet";
import LCG from 'leaflet-control-geocoder';
import "leaflet/dist/leaflet.css";

export default function MyMap({getAddressFromLatLong}) {
  var [latLng,setlatlng] = useState(null);
  var [zoom,setZoom] = useState(4);
  var [map,setData] = useState([]);
  var [animate,setAnimate] = useState(false);
  var [markers,setMarkers] = useState([])


  useEffect(() => {
    console.log("markers ",markers);
    if (latLng != null){
    var geocoder = new L.Control.geocoder();
    var latLngParser = new L.Control.Geocoder.latLng();

     geocoder.options.geocoder.reverse(latLng,5,(address)=>{
        getAddressFromLatLong(address[0].name)
       },null)
  }
  },[latLng,markers]);


var customMarker = new L.icon({
  iconUrl: "https://unpkg.com/leaflet@1.4.0/dist/images/marker-icon.png",});

function updateLatLng(e) {
  setlatlng(e.latlng);
}

function addMarker(e){
  if (markers.length < 2){
    setlatlng(e.latlng);
    setMarkers(markers => markers.concat(e.latlng))
  }
}

function toggleAnimate() {
  setAnimate(animate => !animate);
}

  var MAPBOX_ACCESS_TOKEN = process.env.MAPBOX_ACCESS_TOKEN;

  var locateOptions = {
    position: 'topright',strings: {
      title: 'Show me where I am,yo!'
    },onActivate: () => {} // callback before engine starts retrieving locations
  };

  return map ? (
    <>
      <label>
        <input
          className="animate-panning"
          checked={animate}
          onChange={toggleAnimate}
          type="checkbox"
        />
        Animate panning
      </label>

      <Map animate={animate} zoom={zoom} onClick={addMarker}>
         {latLng && markers.map((position,idx)=> {
          {console.log("position ",position)}
          {console.log("idx ",idx);}
          <Marker key={`marker-${idx}`} onDrag={updateLatLng} draggable={true} position={position} icon={customMarker}>
          <Popup>
            This is your starting point!
          </Popup>
        </Marker>
         })}
        <MapboxLayer
          accessToken={MAPBOX_ACCESS_TOKEN}
          style="mapbox://styles/mapbox/streets-v9"
        />
        <LocateControl options={locateOptions} startDirectly />
      </Map>
    </>
  ) : (
    'Data is Loading...'
  );
}