如何使用嵌套的 flatlist 或 sectionlist？

Question

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

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 组件：

<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')

Answer 1

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

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

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

如何使用嵌套的 flatlist 或 sectionlist？

How to use nested flatlist or sectionlist?

react-native

expo

react-native-flatlist

react-native-sectionlist