React Native调用data.map时报Undefined is not a function错误

云原生阿岚

2026-8-27

问题根因

报错的核心原因是你赋值给state data 的值不是数组类型，自然不存在.map()方法：

你当前代码直接把接口返回的完整JSON对象整体setData(results)，但你调用的荷兰地址API返回结构不是纯数组，实际的点位列表数据存在返回对象的details字段下，外层还包含status、errormessage等元字段。
一旦接口请求完成把整个非数组对象赋值给data，组件重渲染时调用对象的.map方法就会抛出你看到的错误。
额外还有两个隐藏问题：一是react-native-maps的Marker组件要求坐标字段为latitude/longitude，你当前写的lat/lon即使不报错也无法正常渲染点位；二是接口返回的经纬度是字符串类型，直接传会导致坐标定位异常。

修复方案

按以下步骤修改代码即可解决问题：

修正接口返回值的赋值逻辑，增加格式校验，只把实际的点位数组存入state
找到SupermarketList组件中useEffect的请求回调部分，替换为以下代码：

.then(response => response.json())
.then(results => {
  // 校验接口返回状态，确认details字段是数组才赋值
  if (results.status === 'ok' && Array.isArray(results.details)) {
    setData(results.details);
  } else {
    // 异常情况赋值为空数组，避免map调用报错
    setData([]);
    console.error('接口返回异常：', results);
  }
})
.catch(error => {
  setData([]);
  console.error(error);
});

修正Marker的坐标传参与key规则
替换原来的markers生成逻辑：

const markers = data.map((supermarket, index) => {
  // 经纬度从字符串转为数字，字段名匹配组件要求
  const longitude = Number(supermarket.lon);
  const latitude = Number(supermarket.lat);
  return (
    <Marker 
      // 避免用数组index做key，防止后续数据变动时渲染错位
      key={`${latitude}-${longitude}-${index}`}
      coordinate={{ latitude, longitude }}
    />
  )
})

解决安卓端HTTP请求拦截问题
你当前用的接口地址是HTTP协议，安卓9及以上版本默认禁止明文HTTP请求，会导致接口直接请求失败：

优先把接口地址替换为HTTPS协议：https://api.postcodedata.nl/v1/postcode/?postcode=1211EP&streetnumber=60&ref=domeinnaam.nl&type=json
如果必须使用HTTP，在安卓项目的AndroidManifest.xml的<application>标签下添加android:usesCleartextTraffic="true"属性放行明文请求。

可选优化

可以增加加载态判断，接口请求过程中显示加载提示，优化体验：

const [loading, setLoading] = useState(true);
// 请求发起前setLoading(true)，请求结束（不管成功失败）setLoading(false)
if (loading) return <Text>点位加载中...</Text>

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