React-Leaflet删除标记时多标记误删及渲染异常问题求解

问题核心诱因 #

• Marker组件的key使用了不稳定的数组索引，导致React Diff逻辑异常
  你当前设置的key为marker-${idx}，数组索引会随着元素的增删动态变化：比如3个标记对应的索引是0、1、2，删除索引为1的标记后，原来索引为2的标记会自动变成新的索引1。React在重渲染时会认为key为marker-1的组件无需销毁，直接复用原有节点，和你手动删除图层的逻辑产生错位，就会出现两个标记同时消失的现象。
• 同时混用手动操作图层和响应式state驱动渲染两种逻辑，产生执行冲突
  React-Leaflet的Marker属于受控组件，本身会根据传入的坐标数组自动完成增删渲染，不需要你手动调用map.removeLayer删除图层。你现在先手动删除图层再更新state的操作，反而会和组件自身的响应式渲染逻辑冲突，导致渲染结果不符合预期。

修复方案 #

1. 给每个标记生成固定唯一标识，代替数组索引作为key，比如添加标记时同时存储时间戳作为唯一id：

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

2. 简化删除逻辑，移除手动操作图层的代码，只修改state即可，React-Leaflet会自动同步标记的增删：

const removeMarker = (targetId) => {
  setPosition(coord.filter(item => item.id !== targetId))
}

3. 修改渲染逻辑，用固定id作为key：

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

内容的提问来源于stack exchange，提问作者Diana Sk