如何使用嵌套的 flatlist 或 sectionlist？

Posted 2023-02-19

【中文标题】如何使用嵌套的 flatlist 或 sectionlist？

【英文标题】：How to use nested flatlist or sectionlist?

【发布时间】：2021-09-26 11:52:38

【问题描述】：

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

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

【问题讨论】：

您的代码似乎没问题。您确定您使用的是有效的 JSON 吗？因为您发布的 JSON 无效...

是的，我是。我在使用前将其打印到控制台。

好的。你能用codeandbox复制你的错误吗？

不确定，但我相信在渲染项目中解构时，您使用名称作为 item2，因为 renderItem 返回值名称作为项目。所以这一定是导致问题的原因，如果您将名称从 item2 更改为 item，我想它应该可以正常工作。

我认为您不需要对讲座数组进行字符串化。它应该可以正常工作

【参考方案1】：

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

renderItem=( item: item2 )=>

这将允许您将属性重命名为 item2，它会正常工作。您可以在此处进一步了解重命名解构变量Renaming de-structured Variable