React-Leaflet：TypeError：无法读取Marker组件中null的属性“ lat”

如何解决React-Leaflet：TypeError：无法读取Marker组件中null的属性“ lat”

不确定我为什么得到：

TypeError：无法读取null的属性“ lat”

地图组件的状态与我使用setState定义的状态相同，即latLng及其呈现方式：

根据leaflet docs，“标记”组件采用一个由两个数字组成的数组-即纬度和经度...

这就是我在组件中所做的：

import React,{ useState,useEffect,useRef } from 'react'
import { Map,Marker,Popup } from 'react-leaflet';
import LocateControl from '../LocateControl/LocateControl.jsx';
import MapboxLayer from '../MapboxLayer/MapboxLayer.jsx';
import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';

export default function MyMap() {
  var [latLng,setlatlng] = useState([39.74739,-105 ]);
  var [zoom,setZoom] = useState(4);
  var [map,setData] = useState([]);
  var [animate,setAnimate] = useState(false);

  useEffect(() => {
  },[]);


let DefaultIcon = L.icon({
    iconUrl: icon,shadowUrl: iconShadow
});

L.Marker.prototype.options.icon = DefaultIcon;

  function handleClick(e) {
    var {lat,lng} = e.latlng;
    var eventArray = [lat,lng]
    setlatlng(latLng => ([...latLng,...eventArray ]))
  }

  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} center={latLng} onClick={handleClick} zoom={zoom}>
        <Marker position={latLng}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
        <MapboxLayer
          accessToken={MAPBOX_ACCESS_TOKEN}
          style="mapbox://styles/mapbox/streets-v9"
        />

        <LocateControl options={locateOptions} startDirectly />
      </Map>
    </>
  ) : (
    'Data is Loading...'
  );
}


Can anyone please help with this?

Should I be using useEffect here?

Thanks in advance!