Question

我正在开发一个应用程序，我在其中使用嵌套的Flatlist。在main-Flatlist中，我们有renderItems，其中一个项目中有一个内部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”数组对象并在内部平面列表中显示数据。

在内部平面列表的renderItem方法中，我尝试使用.map和forEach。我收到错误消息，指出无法读取未定义的属性“地图”

_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}

尝试这个。

从ReactNative中的InnerObject获取数据

1 个答案: