React ZoomToLocation组件仅返回JSON最后一项无法遍历所有项

• react-leaflet的useMapEvents钩子针对单个<MapContainer>实例只会全局注册一次事件监听，在循环渲染的每个<Marker>下都挂载<ZoomToLocation>组件时，后续组件注册的click事件会直接覆盖之前注册的回调
• 最后一次注册的回调闭包捕获的是数组最后一项的经纬度，所以不管点哪个标记，触发的都是最后一个点位的定位逻辑

推荐直接给<Marker>绑定点击事件，不需要额外嵌套自定义组件，逻辑更直观：

function MyMap() {
  return (
    <MapContainer>
      {loc.map(loc => (
        <Marker
          key={loc.properties.id}
          position={[loc.properties.y, loc.properties.x]}
          eventHandlers={{
            click: (e) => {
              e.target._map.setView([loc.properties.y, loc.properties.x], 15)
            }
          }}
        />
      ))}
    </MapContainer>
  )
}

如果要保留独立的<ZoomToLocation>组件，注意只能在MapContainer下全局挂载一次，不要放在循环内部：

const ZoomToLocation = () => {
  const map = useMapEvents({
    click(e) {
      // 从点击事件的源marker上取position属性即可
      const markerPos = e.sourceTarget.options.position
      if (markerPos) map.setView(markerPos, 15)
    }
  })
  return null
}

function MyMap() {
  return(
    <MapContainer>
      {/* 全局只挂载一次 */}
      <ZoomToLocation />
      {loc.map(loc => (
        <Marker 
          key={loc.properties.id} 
          position={[loc.properties.y, loc.properties.x]}
        />
      ))}
    </MapContainer>
  )
}

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