时间戳

首页 > 解决方案 > 如何使用嵌套的 flatlist 或 sectionlist？

react-native - 如何使用嵌套的 flatlist 或 sectionlist？

问题描述

我正在尝试创建嵌套平面列表，但渲染时发生错误。我看不出有什么错误。我的数组就像（包含那个学期的学期和讲座）

Array [
  Object {
    "semester": "1",
    "lectures": Array [
      Object {
        "grade": "BA",
        "id": 0,
        "lecture": "TÜRK DİLİ",
      },
      Object {
        "grade": "DC",
        "id": 2,
        "lecture": "FIZIKI",
      },
      Object {
        "grade": "AA",
        "id": 4,
        "lecture": "BİLGİSAYAR MÜHENDİSLİĞİNE GİRİŞ",
      },
      Object {
        "grade": "BB",
        "id": 6,
        "lecture": "MATEMATIKI Zorunlu сс 6 İNGİLİZCE",
      },
      Object {
        "grade": "DD",
        "id": 8,
        "lecture": "NESNEYE DAYALI PROGRAMLAMA",
      },
      Object {
        "grade": "AA",
        "id": 10,
        "lecture": "WEB TEKNOLOJİLERİ",
      },
    ],
  },
]

还有我的平面列表组件：

<FlatList
    data={transcript}
    renderItem={({ item }) => (
      <View>
        <Text>{item.semester}</Text>
        <FlatList
          data={item.lectures}
          renderItem={({ item2 }) => (
            <View>
              <Text>{item2.lecture}</Text>
            </View>
          )}
          keyExtractor={(item2) => item2.id.toString()}
        />
      </View>
    )}
    keyExtractor={(item) => item.semester.toString()}
  />

我得到的错误：

[Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'item2.lecture')]

无论如何，<Text>HEY</Text>而不是<Text>{item2.lecture}</Text>像预期的那样工作。

当我像这样使用sectionlist

<SectionList
        sections={transcript}
        renderItem={({ item }) => <Text> {item.lecture}</Text>}
        renderSectionHeader={({ section }) => <Text>{section.semester}</Text>}
        keyExtractor={(item, index) => index}
      />

我收到错误

TypeError: undefined is not an object (evaluating 'items.length')

标签： react-nativeexporeact-native-flatlistreact-native-sectionlist

解决方案

这里的问题是，根据官方文档，renderItem 将具有三个属性的对象传递给函数项、索引、分隔符。在上面的代码中，您试图解构一个名为item2的属性，该属性在对象中不存在，因为该属性名称是item。因此，要为两个 renderItem 方法保留单独的名称，您可以使用以下语法将第二个项目重命名为 item2：

renderItem={({ item: item2 })=>{}}

这将允许您将属性重命名为 item2 并且它会正常工作。您可以在此处进一步阅读重命名解构变量重命名解构变量

推荐阅读