React Native中datas存在数据却触发‘undefined is not a function(near '...datas.map....')’错误的原因排查

我帮你拆解下这个问题的核心原因，虽然你调试时看到datas有有效数组数据，但报错说明在某个渲染周期里，datas并不是一个可遍历的数组类型，具体原因和解决方案如下：

可能的问题根源 #

1. 路由参数item_sizes并非始终是数组 #

虽然你的目标数据是数组，但在组件渲染过程中，route.params.item_sizes可能在某个阶段是非数组类型（比如JSON字符串、undefined、普通对象）：

• 举个常见场景：如果导航时参数被意外序列化为字符串（比如跨页面传递时没有正确处理数组），setDatas会把字符串赋值给datas。此时字符串的length大于0，代码会进入if(datas.length > 0)分支，但字符串没有map方法，调用datas.map()就会触发你看到的错误。
• 另一种情况：路由参数加载延迟，首次渲染时route.params.item_sizes是undefined，虽然初始datas是空数组，但如果后续setDatas(undefined)，后续渲染时若代码错误进入map分支（比如类数组对象无map方法），就会触发相关错误。

2. 缺少数组类型校验 #

你的代码只判断了datas.length > 0，但没有校验datas本身是否为数组。如果datas是一个看起来像数组但没有map方法的类对象，就会直接触发错误。

3. 组件未返回默认值 #

当datas.length <= 0时，ItemSizes函数没有返回任何内容（既没有React元素也没有null），这违反了React组件的返回规则，可能引发潜在的渲染异常。

针对性解决方案 #

方案1：强制保证datas始终是数组 #

在useEffect中设置状态前，先校验并转换为数组，同时添加依赖项确保参数变化时同步更新：

useEffect(() => {
  // 校验item_sizes是否为数组，否则设为空数组
  const validSizes = Array.isArray(route.params.item_sizes) 
    ? route.params.item_sizes 
    : [];
  setDatas(validSizes);
}, [route.params.item_sizes]) // 添加依赖，参数变化时重新更新状态

方案2：在组件内先校验数组类型 #

在调用map前，先确认datas是数组，同时添加默认返回值：

const ItemSizes = () => {
  // 先校验数组类型，再判断长度
  if(Array.isArray(datas) && datas.length > 0) { 
    console.log("Item size data: ", datas);
    return(
      <View> 
        {datas.map((data,key) => ( 
          <View key={key}>
            <View style={{flex:0.2}}>
              <MaterialCommunityIcons name={"radiobox-blank"} size={20} color={'gray'}/>
            </View>
            <View style={{flex:1}}>
              <Text style={{fontSize:16, fontWeight:'bold'}}>{data.size}</Text>
            </View>
            <View style={{flex:1, flexDirection:'row-reverse'}}>
              <Text style={{fontSize:16, fontWeight:'bold'}}>{data.price}</Text>
            </View>
          </View>
        ))} 
      </View>
    ) 
  }
  // 当无数据时返回null，符合React组件要求
  return null;
}

方案3：检查路由参数传递逻辑 #

确保导航到当前页面时，传递的item_sizes是真正的数组，而非其他类型：

// 示例导航代码
navigation.navigate('YourTargetScreen', {
  item_sizes: [{"size":"Small","price":"90"},{"size":"Large","price":"180"},{"size":"Extra Large","price":"200"}]
});

如果是从后端接口获取数据后传递，确保数据解析正确（比如JSON.parse后确实是数组）。

为什么调试时看到有效数据还会报错？ #

React组件会经历多次渲染，你调试时捕获到的可能是最后一次正确渲染的datas，但在之前的某个渲染周期中，datas是无效的非数组值，触发了错误。比如路由参数延迟加载，首次item_sizes是undefined，后续才加载为数组，此时错误已经抛出，但日志显示的是最终正确的数据。

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