React Native使用FlatList展示API返回嵌套JSON数据不显示怎么办

问题根因 #

• FlatList的data属性只接受数组类型的数据源，你现在传的this.state.items.data是个带"15""16""17"键的普通对象，根本不是数组，FlatList遍历不到任何条目，这是直接不显示的核心原因。
• 就算把数据源转成数组，你在renderItem里写的item.products_info.name也取不到值：products_info本身是商品数组，不是单商品对象，直接拿.name会得到undefined，就算列表渲染了也显示空内容。

修复实现 #

1. 转换可用的列表数据源
   拿到接口返回的data对象后，把对象转成数组，把原来的订单ID保留成数组元素的字段，再存到state里：

   // fetch拿到响应后处理数据
   const rawData = res.data; // 接口返回的那个嵌套订单对象
   const listData = Object.keys(rawData).map(orderKey => ({
     orderId: orderKey, // 保留原来的"15""16""17"键做唯一标识
     ...rawData[orderKey]
   }))
   // 更新state
   this.setState({ orderList: listData })
   

2. 重写FlatList配置
   传入转换后的数组，补上必需的keyExtractor，修正取值路径：

   <View style={styles.container}>
     <FlatList
       data={this.state.orderList}
       // 给每个条目绑定唯一key，消除渲染警告
       keyExtractor={(item) => item.orderId}
       renderItem={({item}) => 
         <View style={{height: 50}}>
           {/* 从products_info数组里取第一条的商品名，加空判断防止报错 */}
           <Text style={{height: 50}}>{item.products_info?.[0]?.name || '无商品信息'}</Text>
           <View style={{height: 1, backgroundColor: 'gray'}} />
         </View>
       }
     />
   </View>
   

注意事项 #

• 别在FlatList的data属性里直接写Object.values(this.state.items.data)做内联转换，每次组件重渲染都会重新遍历对象，降低列表性能。
• 如果单个订单下有多个商品，直接在条目内部用products_info.map()渲染即可，不需要嵌套新的FlatList。

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