React父子组件传函数更新Zoom值失败问题求助

核心问题 #

你当前的代码里，只有在地图被点击时才调用了handlezoom(13)，但定位成功的locationfound事件中完全没有触发这个函数——这就是父组件的zoom变量一直停留在1的原因。你的需求是「定位成功后改为13」，所以必须把handlezoom的调用放到定位成功的回调逻辑里。

修复步骤 #

1. 在子组件的locationfound事件处理逻辑中，添加handlezoom(13)调用，同时可以把map.flyTo的缩放参数直接设为13，让地图视图同步更新到对应级别。
2. （可选）移除点击事件里的handlezoom(13)，因为这会导致用户一点击就修改zoom，不符合「定位成功后才更新」的需求。

修改后的子组件代码 #

import React,{useState} from 'react'
import { Marker, Popup, useMapEvents } from 'react-leaflet';

export default function LocationMarker({handlezoom}) {
    const [position, setPosition] = useState(null)
    
    const map = useMapEvents({
        click() {
            map.locate()
            // 此处可移除handlezoom调用，按需保留
        },
        locationfound(e) {
            setPosition(e.latlng)
            // 调用父组件方法更新zoom值
            handlezoom(13)
            // 让地图飞到定位位置并设置缩放级别为13
            map.flyTo(e.latlng, 13)
        },
    })

    return position === null ? null : (
        <Marker position={position}>
            <Popup>You are here</Popup>
        </Marker>
    )
}

额外优化建议（可选） #

父组件中的handlezoom函数可以用useCallback包裹，避免组件重渲染时函数重复创建，提升性能：

const handlezoom = useCallback((zoomi) => {
    setzoom(zoomi)
}, []);

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