React Native Maps使用Array.map()添加多个Marker时报错

问题分析 #

你的代码存在几个关键问题，导致模拟器报错：

• key 类型错误：Marker 的 key={data} 传入的是对象，React 要求组件 key 必须是字符串或数字，直接传对象会引发渲染异常。
• 坐标类型不匹配：示例数据中 LT（纬度）和 LG（经度）是字符串格式，但 MapView 的 coordinate 要求传入数字类型，直接赋值会导致地图无法解析坐标。
• 冗余的 Fragment 包裹：单个 Marker 无需用 <> 包裹，多余的层级会干扰组件渲染逻辑。

修改后的代码 #

<MapView
  key={'map'}
  showsUserLocation
  provider={PROVIDER_GOOGLE}
  style={styles.map}
  region={{
    latitude: 38.439607,
    longitude: 34.884025,
    latitudeDelta: 1,
    longitudeDelta: 16,
  }}>
  {carListStore.car.map((data) => (
    <Marker
      key={data.ID} // 使用数据的唯一ID作为key，保证渲染稳定性
      coordinate={{
        latitude: data.LT !== null ? Number(data.LT) : 0, // 字符串转数字，适配坐标要求
        longitude: data.LG !== null ? Number(data.LG) : 0,
      }}
      title={data.P}
      description={`${data.SP} km/h`}>
      <Image 
        source={driverLogo} 
        resizeMethod='scale' 
        resizeMode='contain' 
        style={{width:45, height:45}} 
      />
    </Marker>
  ))}
</MapView>

关键修改说明 #

1. 替换 Marker 的 key：使用每条数据的 ID（唯一标识）替代对象，避免 React 渲染时的复用错误。
2. 坐标类型转换：通过 Number() 将字符串格式的经纬度转为数字，符合 MapView 的坐标参数要求。
3. 移除冗余 Fragment：直接返回 Marker 组件，简化渲染层级。

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