如何使用数据中对象的嵌套循环渲染 SectionList

Posted 2023-02-16

【中文标题】如何使用数据中对象的嵌套循环渲染 SectionList

【英文标题】：How to render SectionList with Nested looped of Objects in data

【发布时间】：2019-11-09 05:15:12

【问题描述】：

我有以下 json 结构

  "title": "Name(s)",
  "type": "Text",
  "data": [
    
      "source": "DB",
      "title": "All",
      "list": [
        
          "name": "ABCD",
          "count": 1
        ,
        
          "name": "BCDE",
          "count": 1
        ,
        
          "name": "CDEF",
          "count": 1
        ,
        
          "name": "DEFG",
          "count": 2
        ,
        
          "name": "EFGH",
          "count": 1
        
      ]
    
  ]
,

  "title": "Category(s)",
  "type": "Text",
  "data": [
    
      "source": "DB",
      "title": "All",
      "list": [
        
          "name": "Vegetables",
          "count": 1942
        ,
        
          "name": "Saloon",
          "count": 355
        ,
        
          "name": "General Store",
          "count": 331
        ,
        
          "name": "Restaurants",
          "count": 130
        ,
        
          "name": "Fast Food",
          "count": 108
        
      ]
    
  ]

我正在尝试将数据显示为 Like

第 1 节标题：“姓名” 第一行：“ABCD” 第二行“BCDE” 第三行“CDEF” . . .

第二部分标题：“类别” 第一行：“蔬菜” 第二排“轿车” 第三排“杂货店” . . . 在这里，我是否应该使用 SectionList/Flatlist/ 两者混合得到上述结果。

在 flatlist/sectionlist 中，我在 renderSectionHeader 但在 renderItem 中获取部分标题名称和类别， 如何循环“列表”对象数组。 请告诉我

【参考方案1】：

你必须像下面这样更新数据，

例如：

[
  
    "title": "Name(s)",
    "type": "Text",
    "data": [
      
        "name": "ABCD",
        "count": 1
      ,
      
        "name": "BCDE",
        "count": 1
      ,
      ...
    ]
  ,
  
    "title": "Category(s)",
    "type": "Text",
    "data": [
      
        "name": "Vegetables",
        "count": 1942
      ,
      
        "name": "Saloon",
        "count": 355
      ,
      ...
    ]
  
...
]

并使用SectionList 显示它，

例如：

 ...
    <SectionList
      renderItem=(item, index, section) => <Text key=index>item.name</Text>
      renderSectionHeader=(section: title) => (
        <Text style=fontWeight: 'bold'>title</Text>
      )
      sections=this.state.data
      keyExtractor=(item, index) => item + index
    />
    ...