如何使用嵌套的平面列表或分段列表

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

这里的问题是，根据官方文档，renderItem将一个具有三个属性的对象传递给函数-item、index和seperator。在上面的代码中，您试图对一个名为item2的属性进行反结构，该属性在对象中不存在，因为该属性名称为item。因此，为了保持renderItem方法的单独名称，您可以使用以下语法将第二个项重命名为item2：

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

这将允许您将属性重命名为item2，它将正常工作。你可以在这里进一步阅读关于重命名解构变量重命名解构变量