React Native中map遍历API数据遇undefined错误及兼容对象/数组的求助

这个问题我之前做项目时也碰到过，核心原因是异步数据加载时机和数据格式兼容性的问题，咱们一步步拆解解决：

为什么API请求时会报错？ #

硬编码数据是同步存在的，组件渲染时ticket和inventoryItems已经有明确值；但调用外部API时，数据是异步返回的——组件初始渲染时，ticket可能还是null/undefined状态，这时候你直接访问ticket.inventoryItems，甚至对它做flat()和map()操作，自然会触发"cannot read property 'passenger' of undefined"的错误。

另外你提到inventoryItems有时是单个对象而非数组，这也会导致map()无法正常执行（对象没有map方法）。

具体解决方案 #

1. 先处理异步加载的空值判断 #

在组件中先判断数据是否加载完成，避免在无数据时执行遍历逻辑：

// 假设你用useState管理数据
const [ticket, setTicket] = useState(null);

// 模拟API请求逻辑
useEffect(() => {
  fetch('你的API地址')
    .then(res => res.json())
    .then(data => setTicket(data))
    .catch(err => console.error('请求失败:', err));
}, []);

// 数据未加载完成时，显示加载提示
if (!ticket) {
  return (
    <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
      <Text>加载中...</Text>
    </View>
  );
}

2. 统一inventoryItems的格式（兼容单个对象/数组） #

写一行代码把inventoryItems统一转成数组格式，不管它原本是数组还是单个对象：

const inventoryItems = Array.isArray(ticket.inventoryItems)
  ? ticket.inventoryItems
  // 如果是单个对象就转成数组，如果是null/undefined就返回空数组
  : ticket.inventoryItems ? [ticket.inventoryItems] : [];

3. 用可选链操作符（?.）做深层属性兜底 #

即使数据加载完成，也可能存在个别item缺少passenger属性的情况（比如API返回数据不规范），用?.可以避免访问不存在的属性时报错，再配合||给默认值提升用户体验：

<Text>{o.passenger?.name || '未填写'}</Text>
<Text>{o.passenger?.age || '未填写'}</Text>
<Text>{o.passenger?.gender || '未填写'}</Text>

整合后的完整示例代码 #

import { useState, useEffect } from 'react';
import { View, Text } from 'react-native';

export default function TicketComponent() {
  const [ticket, setTicket] = useState(null);

  useEffect(() => {
    // 替换成你的真实API请求
    fetch('https://your-api-url.com/ticket')
      .then(res => res.json())
      .then(data => setTicket(data))
      .catch(err => console.error('获取票务数据失败:', err));
  }, []);

  if (!ticket) {
    return (
      <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
        <Text>加载票务信息中...</Text>
      </View>
    );
  }

  // 统一inventoryItems为数组格式
  const inventoryItems = Array.isArray(ticket.inventoryItems)
    ? ticket.inventoryItems
    : ticket.inventoryItems ? [ticket.inventoryItems] : [];

  return (
    <View style={{padding: 15}}>
      {inventoryItems.map((item, index) => (
        // 注意：尽量不用索引当key，有条件的话用item的唯一标识（比如passenger的id）
        <View key={`ticket-item-${index}`} style={{marginBottom:15, borderWidth:1, padding:10, borderRadius:5}}>
          <View style={{flexDirection: 'row', justifyContent: 'space-between', width: '80%'}}>
            <View>
              <Text>姓名</Text>
              <Text>年龄</Text>
              <Text>性别</Text>
            </View>
            <View style={{alignItems:'flex-end'}}>
              <Text>{item.passenger?.name || '未填写'}</Text>
              <Text>{item.passenger?.age || '未填写'}</Text>
              <Text>{item.passenger?.gender || '未填写'}</Text>
            </View>
          </View>
          <View style={{marginTop:8}}>
            <Text>座位号: {item.seatName || '未分配'}</Text>
          </View>
        </View>
      ))}
    </View>
  );
}

额外提醒 #

• 尽量不要用数组索引作为key，如果数据有增删操作，会导致组件渲染异常，优先用每个item的唯一标识（比如如果passenger有id字段，就用item.passenger.id作为key）。
• 如果API返回的inventoryItems可能是null，一定要在格式转换时处理这种情况，避免出现空值异常。

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