React-Native从嵌套数组中返回对象的实现问题

嘿，作为React Native新手碰到嵌套数组处理的难题太正常了！我来帮你搞定从TfL地铁状态API返回的嵌套数据里提取对象的问题～

首先先把你给出的API返回JSON片段整理出来，方便我们理解结构：

[
{
"$type": "Tfl.Api.Presentation.Entities.Line, Tfl.Api.Presentation.Entities",
"id": "bakerloo",
"name": "Bakerloo",
"modeName": "tube",
"disruptions": [],
"created": "2018-03-13T13:40:58.76Z",
"modified": "2018-03-13T13:40:58.76Z",
"lineStatuses": [
{ "$type": "Tfl.Api.Presentation.Entities.LineStatus, ..." }
]
}
]

从结构能看到，外层是线路数组，每个线路对象里的lineStatuses就是你要找的嵌套对象数组。下面分几种常见场景给你代码示例：

1. 获取单条线路的状态对象 #

如果你想单独提取某一条线路（比如Bakerloo线）的lineStatuses，可以用数组的find方法定位到目标线路，再取出嵌套数组：

// 假设你已经通过API请求拿到了完整的线路数据，存在tubeLines变量中
const targetLine = tubeLines.find(line => line.id === 'bakerloo');

// 记得判空，避免线路不存在时报错
if (targetLine) {
  const lineStatuses = targetLine.lineStatuses;
  console.log('Bakerloo线的状态数据:', lineStatuses);
  // 这里可以进一步处理每个状态对象，比如取出状态描述、影响原因等
}

2. 遍历所有线路的状态对象 #

如果要批量处理所有线路的状态，用forEach遍历外层线路数组，再嵌套遍历lineStatuses：

tubeLines.forEach(line => {
  console.log(`=== ${line.name} 线路状态 ===`);
  // 同样判空，避免空数组报错
  if (line.lineStatuses?.length) {
    line.lineStatuses.forEach(status => {
      // 这里可以操作单个状态对象，比如打印状态等级、描述
      console.log(`状态: ${status.statusSeverityDescription}`);
      console.log(`影响原因: ${status.reason || '无异常'}`);
    });
  } else {
    console.log('当前线路无异常状态');
  }
});

3. 在React Native组件中渲染嵌套状态 #

如果要把这些状态展示在UI上，用FlatList嵌套的方式是最常用的：

import { FlatList, Text, View, StyleSheet } from 'react-native';

// 假设tubeLines是你从API获取并存储的状态数据
const TubeStatusScreen = () => {
  return (
    <FlatList
      data={tubeLines}
      keyExtractor={item => item.id}
      style={styles.container}
      renderItem={({ item: line }) => (
        <View style={styles.lineCard}>
          <Text style={styles.lineName}>{line.name}</Text>
          {/* 嵌套FlatList渲染当前线路的所有状态 */}
          <FlatList
            data={line.lineStatuses}
            keyExtractor={(status, index) => `${line.id}-${index}`}
            renderItem={({ item: status }) => (
              <View style={styles.statusItem}>
                <Text style={styles.statusText}>
                  {status.statusSeverityDescription || '正常运营'}
                </Text>
                {status.reason && (
                  <Text style={styles.reasonText}>原因: {status.reason}</Text>
                )}
              </View>
            )}
          />
        </View>
      )}
    />
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, padding: 10 },
  lineCard: { marginBottom: 15, padding: 10, backgroundColor: '#f5f5f5', borderRadius: 8 },
  lineName: { fontSize: 18, fontWeight: 'bold', marginBottom: 8 },
  statusItem: { marginVertical: 4 },
  statusText: { fontSize: 16, color: '#333' },
  reasonText: { fontSize: 14, color: '#666', marginTop: 2 }
});

export default TubeStatusScreen;

小提示：处理嵌套数据时一定要注意判空，比如用可选链操作符?.或者条件判断，避免因为某个线路没有lineStatuses或者字段缺失导致应用崩溃哦～

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