React Native中使用map遍历API数据时出现Cannot read property错误的解决

这个问题我之前帮不少开发者解决过，核心原因其实是异步数据加载的时机和数据类型的不稳定双重作用导致的，咱们一步步来拆解解决：

1. 先搞定异步数据的加载状态 #

硬编码数据能正常运行，是因为数据是同步存在的，而API请求是异步操作——组件第一次渲染时，你的ticket数据大概率还没从接口返回，此时直接访问ticket.inventoryItems就会触发undefined相关错误。

解决方案：在渲染前加加载判断，或者用可选链操作符做防护：

// 方案1：用加载占位符
if (!ticket) {
  return <ActivityIndicator size="large" color="#0000ff" />;
}

// 方案2：在访问属性时用可选链（ES2020+支持）
const inventoryItems = ticket?.inventoryItems;

2. 稳定处理inventoryItems的类型转换 #

你提到inventoryItems有时是数组，有时是单个对象，现有转换逻辑可能没考虑到null或undefined的情况，导致后续flat、map操作出错。咱们写一个健壮的转换函数：

const normalizeInventoryData = (rawItems) => {
  // 先处理null/undefined的情况，直接返回空数组
  if (!rawItems) return [];
  // 判断是否为数组，不是的话包装成数组
  return Array.isArray(rawItems) ? rawItems : [rawItems];
};

3. 遍历过程中加空值防护 #

就算前面的转换都做好了，也有可能API返回的inventoryItems里存在空对象或者缺失passenger属性的项，此时map时直接访问item.passenger就会报错。

可以用两种方式防护：

• 可选链+空值合并操作符
• 提前过滤无效项

示例代码：

// 先转换数据
const normalizedItems = normalizeInventoryData(ticket.inventoryItems);
// 如果需要flat处理嵌套数组，先确保数组有效
const flattenedItems = normalizedItems.flat();

// 遍历渲染
return (
  <View style={styles.container}>
    {flattenedItems.map((item, index) => {
      // 方案1：用可选链跳过无效项
      const passenger = item?.passenger;
      if (!passenger) return null;

      // 方案2：直接在JSX里用可选链
      return (
        <PassengerCard
          key={item.id || index} // 优先用唯一ID，避免index作为key的性能问题
          name={passenger.name}
          idNumber={passenger.idNumber}
        />
      );
    })}
  </View>
);

额外注意点 #

• 尽量不要用数组的index作为key，如果inventoryItems里有唯一标识（比如id），优先用它，避免组件重渲染时出现异常。
• 如果你的flat()操作是为了处理嵌套数组，确保嵌套层级是固定的，或者用flat(Infinity)处理任意层级的嵌套（按需使用）。
• 可以把数据请求和状态管理逻辑放在useEffect里，确保数据加载完成后再更新状态，避免不必要的渲染。

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