React Native中如何将API数据按文件夹分组适配为SectionList格式

核心实现逻辑 #

SectionList 组件要求的数据源必须是固定结构的数组：每个数组元素为一个分组，分组内必须包含title（分组头展示内容）和data（当前分组下的子项列表）两个核心字段。
我们需要把API返回的平铺列表，按照folderid做聚合分组，将同文件夹下的用户名归集到对应分组的data数组中，最终生成SectionList可直接渲染的格式。

数据转换核心代码 #

/**
 * 将API返回的平铺账号列表转换为SectionList可识别的分组格式
 * @param {Array} rawList 接口返回的原始平铺数据
 * @returns {Array} 适配SectionList的分组数组
 */
const formatSectionData = (rawList) => {
  // 用临时Map做分组映射，避免重复遍历
  const groupMap = {}
  rawList.forEach(item => {
    // 以folderid作为分组唯一标识，防止同名文件夹数据串组
    const groupKey = item.folderid
    // 首次遇到该分组时初始化结构
    if (!groupMap[groupKey]) {
      groupMap[groupKey] = {
        title: item.descfolder, // 分组头直接展示文件夹描述名
        data: []
      }
    }
    // 将当前账号条目推入对应分组的列表中
    groupMap[groupKey].data.push({
      id: item.id,
      username: item.username,
      // 可保留完整原始条目，方便后续交互使用
      rawItem: item
    })
  })
  // 将映射对象转换为数组格式，适配SectionList的入参要求
  return Object.values(groupMap)
}

转换后的目标数据结构示例 #

执行转换函数后，得到的数组结构和你期望的分组逻辑完全匹配：

[
  {
    title: "Test Folder",
    data: [
      { id: 7, username: "user1@34.com" },
      { id: 6, username: "user2@xxx.com" }
    ]
  },
  {
    title: "Folder2",
    data: [
      { id: 4, username: "Teste 9997" },
      { id: 1, username: "User5@amazon.com" }
    ]
  },
  {
    title: "New folder",
    data: [
      { id: 5, username: "User998@yahoo.com" }
    ]
  }
]

SectionList 组件实际使用示例 #

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

// 接口请求拿到原始数据后，先调用转换函数生成结构化数据
const rawApiResponse = [ /* 你的API返回的完整平铺数组 */ ]
const sectionDataSource = formatSectionData(rawApiResponse)

// 渲染分组头
const renderGroupHeader = ({ section: { title } }) => (
  <View style={styles.groupHeader}>
    <Text style={styles.groupHeaderText}>{title}</Text>
  </View>
)

// 渲染每个分组下的用户名条目
const renderAccountItem = ({ item }) => (
  <View style={styles.accountItem}>
    <Text style={styles.accountText}>{item.username}</Text>
  </View>
)

// 页面内渲染SectionList
<SectionList
  sections={sectionDataSource}
  keyExtractor={(item) => item.id.toString()}
  renderItem={renderAccountItem}
  renderSectionHeader={renderGroupHeader}
/>

// 样式适配缩进展示效果
const styles = StyleSheet.create({
  groupHeader: {
    paddingVertical: 12,
    paddingHorizontal: 16,
    backgroundColor: '#f2f2f2'
  },
  groupHeaderText: {
    fontSize: 16,
    fontWeight: '600',
    color: '#222'
  },
  accountItem: {
    paddingVertical: 10,
    paddingHorizontal: 32 // 左侧缩进实现用户名相对于文件夹的层级关系
  },
  accountText: {
    fontSize: 14,
    color: '#444'
  }
})

开发注意点 #

• 分组key优先使用folderid而非descfolder，避免后续出现同名文件夹导致数据合并错乱
• 如需调整分组顺序，可在formatSectionData函数最后返回前，对结果数组按业务规则排序（如按folderid升序、按最近更新时间排序）
• 接口后续返回新增的文件夹、账号数据时，只要重新执行一次转换函数，SectionList即可自动渲染更新的分组和条目

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