在react-leaflet上，通过useRef数组移动一些标记

问题描述

我正在尝试根据可拖动标记的位置来更改react-leaflet地图上一些标记的位置。
这应该是在拖动可拖动标记时，在state上更改它的速度太慢，因此我选择使用useRef来对一系列引用进行操作。
问题是r.leafletElement.setLatLng([lat,lng])行被压缩是因为leafletElement是undefined。
（在其他尝试中，我仅使用一个标记而不是数组，并且useRef正常工作。）
谢谢您的帮助。

https://codepen.io/erangeva/pen/XWdyZzw

const { Map: LeafletMap,TileLayer,Marker,Popup,CircleMarker } = ReactLeaflet

const Simple = ({ nums }) => {
    const refs = React.useRef([]);
    if (refs.current.length !== nums.length) {
        refs.current = nums.map((_,i) => refs.current[i] || React.createRef());
    }
    return (
        <LeafletMap center={[51.505,-0.09]} zoom={13}>
            <TileLayer
                attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url='https://{s}.tile.osm.org/{z}/{x}/{y}.png'
            />
            <Marker position={[51.505,-0.09]} draggable={true}
                ondrag={(e) => {
                    refs.current.map((r,i) => {
                        const lat = e.target.getLatLng().lat;
                        const lng = e.target.getLatLng().lng + 0.01 * i;
                        r.leafletElement.setLatLng([lat,lng]);
                    })
                }}
            >
            </Marker>
            {
                nums.map(i =>
                    <Marker position={[51.505,-0.08 + 0.01 * i]}
                        ref={refs.current[i]}
                    >
                    </Marker>)
            }
        </LeafletMap>
    );

}


ReactDOM.render(<Simple nums={[0,1,2,3,4]} />,document.getElementById('container'))

解决方法

在您的示例中，refs的初始化方式具有以下结构：

{
   current: [
       {current: Marker},... 
   ]
} 

意味着基础标记对象需要这样处理：

r.current.leafletElement.setLatLng([lat,lng]); 

这就是为什么所提供的错误首先出现的原因。

---

下面展示了另一种无需使用Refs即可操作标记列表的选项：

const MyMarkerList = ({ startPos }) => {

  const [positions,setPositions] = useState(calcPositions(startPos,4));
  
  function handleDrag(e) {
    const latLng = e.target.getLatLng();
    setPositions(calcPositions([latLng.lat,latLng.lng],4));
  }


  return (
    <>
    <Marker
        position={startPos}
        draggable={true}
        ondrag={(e) => {
          handleDrag(e);
        }}
      ></Marker>
      {positions.map((pos,i) => (
        <Marker key={i} position={pos}></Marker>
      ))}
    </>
  );
};

其中

function calcPositions(startPos,numOfPos){
  return [...Array(numOfPos)].map((v,i) => {
    return [startPos[0],startPos[1] + 0.01 * (i + 1)];
  });
}

用法

<Map center={startPos} zoom={13}>
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
      />
      <MyMarkerList startPos={startPos} />
  </Map>

,

您可以通过仅存储标记 位置而不是标记DOM引用来实现此目的，这些标记是要在内存中存储的复杂且昂贵的对象

在此初始化可拖动标记和要移动的标记的位置。第一个是数组，第二个是包含要移动的标记位置的数组数组：

const [marker,setMarker] = useState([51.505,-0.09]);

const initialMarkersState = nums.map((n) => [51.505,-0.08 + 0.01 * n]);

const [markers,setMarkers] = useState(initialMarkersState);

在拖动事件侦听器上，使用setMarker和setMarkers setState方法更改可拖动标记的位置，并更改所有其他标记的位置。

const handleMarkerDrag = (e) => {
    setMarker(e.latlng);
    const lat = e.target.getLatLng().lat;
    const lng = e.target.getLatLng().lng + 0.01;
    setMarkers((prevState) => {
      const newState = [...prevState];
      nums.forEach((n) => {
        newState[n] = [lat,lng + 0.01 * n];
      });
      return newState;
    });
  };

最后，通过循环标记数组来呈现标记。

{markers.map((position,i) => (
    <Marker position={position} key={i} icon={icon}></Marker>
))}

Demo