React - 傳單刪除標記

Question

我正在嘗試在我的地圖中添加和刪除標記，但是當我嘗試刪除它們時遇到了問題。 用戶點擊地圖並放置任意數量的標記。 當他單擊特定標記的彈出窗口時，他可以將其刪除。 例如，如果用戶放置 3 個標記並想要刪除第二個，當他這樣做時，第二個和第三個標記從地圖上消失。 . 我將坐標存儲在使用狀態鈎子中，雖然我在刪除標記時正確更新了數組，但標記似乎沒有正確重新渲染。 你知道什么可能是錯的嗎？

非常感謝 ：）

這是 AddMarker 組件

function AddMarker() {

const [coord, setPosition] = useState([]);

const map = useMapEvents({
    click: (e) => {   
        setPosition([...coord,e.latlng])
        const mark = e
     },   
})

useEffect(() => {
  console.log( coord);
}, [coord]);


const removeMarker = (index, map) => {
  map.eachLayer((layer) => {
    if (layer.options && layer.options.pane === "markerPane") {
      if (layer.options.uniceid === index) {
        console.log(layer.options.uniceid)
        console.log(index)
        map.removeLayer(layer);
        var array = [...coord];
        array.splice(index, 1);
        setPosition(array)

        console.log(array)
        
        //coord.splice(index,1);
        //setPosition(coord=> [...coord]);
        //console.log(coord)

      }
    }
  });
}

return (
  
    <div>
    {coord.map((pos, idx) =>
        <Marker key={`marker-${idx}`} uniceid={idx} position={pos} icon ={blue} draggable={true} eventHandlers={{
            click: (e) => {console.log(e.latlng)},}}>
        <Popup>
            <PopupForm data ={pos} id={idx} formData={() => removeMarker(idx, map)}></PopupForm>
        </Popup>
      </Marker>

    )}
    </div>   
); }

Answer 1

您不需要像這樣循環遍歷每個地圖層。 您只需要過濾不再包含在您的狀態變量中的點擊標記的坐標，就是這樣！

這是一個簡單的例子，在彈出窗口中有一個普通按鈕

const removeMarker = (pos) => {
        setPosition((prevCoord) =>
          prevCoord.filter(
(prevCoord) => prevCoord.filter((coord) => JSON.stringify(coord) !== JSON.stringify(pos))
            // or (coord) => coord.lat !== pos.lat && coord.lng !== pos.lng 
          )
        );
};
...
return (
          <div>
              {coord.map((pos, idx) => (
                <Marker
                  key={`marker-${idx}`}
                  position={pos}
                  draggable={true}
                  eventHandlers={{
                    click: (e) => {
                      console.log(e.latlng);
                    }
                  }}
                >
                  <Popup>
                    <button onClick={() => removeMarker(pos)}>Remove marker</button>
                  </Popup>
                </Marker>
              ))}
          </div>
 );

演示