React Native MapboxGL：动态添加PointAnnotation仅最后一个onSelected生效

可能的原因1：React key使用index引发的组件识别异常 #

你在循环中用index作为PointAnnotation的key，虽然index是唯一值，但React处理列表组件时，依赖index作为key容易出现组件实例复用或识别错误的情况——尤其是和第三方地图库结合时，可能导致非最后一个组件的事件绑定失效，只有最后一个标注能正常触发回调。

可能的原因2：缺少Mapbox Annotation必需的唯一id属性 #

MapboxGL的PointAnnotation组件内部需要通过唯一id区分不同标注实例，仅设置React的key不足以让Mapbox正确绑定每个标注的事件。若多个标注没有唯一id，Mapbox可能无法识别并触发非最后一个标注的选中回调。

解决方案 #

方案1：使用数据自身的唯一标识作为key和id #

如果points数组里的每个data对象有唯一标识（比如id字段），直接用该标识作为key和id：

const markers = points.map((data) => {
    return (
        <MapboxGL.PointAnnotation
            key={data.id}
            id={data.id}
            coordinate={data["coords"]}
            onSelected={() => alert(data["name"])}
        />
    )
})

方案2：无唯一标识时，用index生成唯一标识 #

若数据没有自带唯一id，可基于index生成唯一字符串，同时用作key和id：

const markers = points.map((data, index) => {
    const uniqueMarkerId = `map-marker-${index}`;
    return (
        <MapboxGL.PointAnnotation
            key={uniqueMarkerId}
            id={uniqueMarkerId}
            coordinate={data["coords"]}
            onSelected={() => alert(data["name"])}
        />
    )
})

额外补充：避免闭包陷阱（若后续出现触发后显示错误内容） #

如果之后遇到“点击任意点都弹出最后一个名称”的问题，可通过解构数据固定变量引用：

const markers = points.map(({ coords, name }, index) => {
    const uniqueMarkerId = `map-marker-${index}`;
    return (
        <MapboxGL.PointAnnotation
            key={uniqueMarkerId}
            id={uniqueMarkerId}
            coordinate={coords}
            onSelected={() => alert(name)}
        />
    )
})

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