React Native中如何从API返回结果提取指定PNR状态数据？

你的apiResults是数组类型状态，API返回结构最外层为数组，内部包含单个结果对象。要提取目标字段，需逐层访问嵌套的对象与数组：

1. 基础字段提取方法 #

先从数组中取出结果对象，再逐层访问内部字段：

// 确保apiResults已有数据再提取
if (apiResults.length > 0) {
  const result = apiResults[0];
  // 提取boarding_station下的departure_time
  const departureTime = result.data.boarding_station.departure_time;
  // 提取booking_date
  const bookingDate = result.data.booking_date;
  // 提取第一个乘客的bookingBerthCode
  const firstPassengerBerthCode = result.data.passenger[0].bookingBerthCode;
  
  console.log(departureTime, bookingDate, firstPassengerBerthCode);
}

2. 处理异步状态更新问题 #

setAPIResults是异步操作，你当前在fetchPNRStatus里直接console.log(apiResults)看不到最新数据，可通过以下方式验证：

• 用useEffect监听apiResults变化：

useEffect(() => {
  if (apiResults.length > 0) {
    console.log('最新API结果:', apiResults);
    // 在此处执行字段提取逻辑
  }
}, [apiResults]);

3. 安全访问字段（避免报错） #

若API返回可能缺失字段，建议使用**可选链操作符?.**防止Cannot read property 'xxx' of undefined错误：

const departureTime = apiResults[0]?.data?.boarding_station?.departure_time;
const bookingDate = apiResults[0]?.data?.booking_date;
const firstPassengerBerthCode = apiResults[0]?.data?.passenger?.[0]?.bookingBerthCode;

4. 在组件中渲染字段 #

在React Native组件中显示值时，先判断数据是否存在再渲染：

return (
  <View>
    {apiResults.length > 0 ? (
      <View>
        <Text>出发时间: {apiResults[0]?.data?.boarding_station?.departure_time}</Text>
        <Text>订票日期: {apiResults[0]?.data?.booking_date}</Text>
        <Text>乘客座位号: {apiResults[0]?.data?.passenger?.[0]?.bookingBerthCode}</Text>
      </View>
    ) : (
      <Text>请输入PNR编号查询状态</Text>
    )}
  </View>
);

优化状态赋值 #

观察API返回结构，最外层已是数组，无需再包裹一层数组：

const results = await response.json();
setAPIResults(results); // 直接赋值数组，不用[results]

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