在 React Native 中从内部对象中获取数据

Question

我正在开发一个应用程序，我在其中使用嵌套的 Flatlist。在 main-Flatlist 中，我们有 renderItems，在其中一个项目中，我有一个 inner-Flatlist，我试图在 renderItems 中显示项目。 我有 json

    {
  "data": {

    "list": [
      {
        "name":"Developer",
        "detail_values": [
          {
            "key1": "value1",
            "key2": "value2"
          },
          {
            "key1": "value1",
            "key2": "value2"
          }
        ]
      },
      {
        "name":"Developer1",
        "detail_values": [
          {
            "key1": "value1",
            "key2": "value2"
          },
          {
            "key1": "value1",
            "key2": "value2"
          }
        ]
      },
      {
        "name":"Developer2"
      },
      {
        "name":"Developer3"
      }
    ]
  }
}

从上面json，如何获取"detail_values"数组对象并在inner-Flatlist中显示数据。

在inner-Flatlist的renderItem方法中，我尝试过使用.map和forEach。我收到错误消息 Cannot read 属性 'map' of undefined

_renderItem({ item, index }) {
    const children = item.detail_values
    return (
      <View style={styles.cardListCell}>

        <View style={styles.view}>
          {
            item.detail_values.map(data => (
              <View><Text>{data.key1}</Text></View>
            ))
          }
          <Text style={styles.countValue}>
            {index}
          </Text>
        </View>
      </View>
    )
}

主要平面列表代码

return (
          <FlatList
            style={styles.container}
            data={this.state.cardsMainModel.cards}// here cards is an array of models
            renderItem={this._renderItem}
            horizontal={false}
            keyExtractor={this._keyExtractorInfoSection}
          />

        );

内部 FlatList 代码

<View style={styles.innerView}>
    <FlatList
                data={this.state.dataSource} //datasource has `list` array
                ItemSeparatorComponent={this.FlatListItemSeparator}
                renderItem={this._renderItem}
                ListHeaderComponent={this.renderHeader}
                keyExtractor={({ id }, index) => id}
              />
   </View>

Answer 1

{item != undefined
 ? item.detail_values.map(data => (
 <View>
 <Text>{data.key1}</Text>
 </View>
 ))
 : null}

试试这个。