React Native中SectionList仅显示测试标题，其余内容不显示问题排查

问题描述 #

我尝试将一组数据转换为SectionList组件，但除了“Test Title”外，其余内容均未显示。请问我哪里操作有误？我了解到网上多数SectionList采用“单键单值”的配置方式，但我的需求需要一个键对应一组值。

原代码如下：

const DATA = [
  {
    section1: 'Application1',
    data: {
      title: 'title',
      content: 'content',
      time: '30 min'
    }
  },
  {
    section1: 'Application2',
    data: {
      title: 'title',
      content: 'content',
      time: '30 min'
    }
  },
  {
    section1: 'Application3',
    data: {
      title: 'title',
      content: 'content',
      time: '30 min'
    }
  }
]

export default function App() {
  return (
    <SafeAreaView style={styles.appContainer}>
      <View style={styles.titleContainer}>
        <Text style={styles.titleText}>
          Test Title 
        </Text>
      </View>

      <SectionList
        sections={DATA}
        renderItem={({ section1 }) => (
          <View style={styles.item}>
            <View>
              <Text style={styles.title}>{section1.data.title}</Text>
              <Text style={styles.title}>{section1.data.content}</Text>
              <Text style={styles.title}>{section1.data.time}</Text>
            </View>
          </View>
        )}
        renderSectionHeader={({section }) => (
          <View style={styles.header}>
            <Text>{section.section1}</Text>
          </View>
        )}
      />
    </SafeAreaView>
  );
}

错误原因分析 #

• 数据结构不符合要求：SectionList要求每个section的data字段必须是数组类型，你当前的data是单个对象，组件会判定该section没有可渲染的列表项，因此不会触发renderItem。
• renderItem参数解构错误：renderItem的回调参数是{ item, index, section }，你错误解构了不存在的section1属性，导致无法获取到要渲染的数据。

修正后的代码 #

1. 调整数据结构 #

将每个section的data改为数组（即使只有一个元素），适配SectionList的要求：

const DATA = [
  {
    section1: 'Application1',
    data: [{
      title: 'title',
      content: 'content',
      time: '30 min'
    }]
  },
  {
    section1: 'Application2',
    data: [{
      title: 'title',
      content: 'content',
      time: '30 min'
    }]
  },
  {
    section1: 'Application3',
    data: [{
      title: 'title',
      content: 'content',
      time: '30 min'
    }]
  }
]

2. 修正renderItem逻辑 #

正确解构item参数（对应data数组中的每一项）：

export default function App() {
  return (
    <SafeAreaView style={styles.appContainer}>
      <View style={styles.titleContainer}>
        <Text style={styles.titleText}>
          Test Title 
        </Text>
      </View>

      <SectionList
        sections={DATA}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text style={styles.title}>{item.title}</Text>
            <Text style={styles.content}>{item.content}</Text>
            <Text style={styles.time}>{item.time}</Text>
          </View>
        )}
        renderSectionHeader={({ section }) => (
          <View style={styles.header}>
            <Text>{section.section1}</Text>
          </View>
        )}
        keyExtractor={(item, index) => index.toString()}
      />
    </SafeAreaView>
  );
}

补充说明 #

• 如果需要一个section对应多组值，直接在data数组中添加更多对象即可，SectionList会自动渲染所有列表项。
• 添加keyExtractor是为了避免React的唯一性警告，确保每个列表项有唯一标识。

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