SectionList报错：Cannot read property 'length' of undefined 问题求助

你遇到的「Cannot read property 'length' of undefined」报错，核心来自SectionList用法逻辑错误和数据/属性访问错误，以下是具体修复步骤：

1. 修正SectionList的渲染逻辑 #

SectionList的renderItem是用来渲染每个section中的单个子项，你现在把整个section的FlatList放在renderItem里，会导致每个section的子项重复渲染FlatList，同时引发数据传递混乱。

正确做法是用renderSectionHeader渲染每个section的完整区块内容，因为你需要每个section对应一个独立的横向/纵向列表：

<SectionList
  sections={sections}
  // 用renderSectionHeader渲染每个section的完整内容
  renderSectionHeader={({ section }) => {
    switch (section.type) {
      case "categories":
        return renderCategories(section);
      case "popular":
        return renderPopular(section);
      case "recent":
        return renderRecent(section);
      default:
        return null;
    }
  }}
  // 无需渲染单个子项，返回null即可
  renderItem={() => null}
  stickySectionHeadersEnabled={false}
/>

2. 修复renderRecent的属性错误 #

你的renderRecent里错误访问了section.item（section的属性是复数items），且第三个section需要纵向滚动，应该用FlatList统一包裹列表逻辑：

const renderRecent = ({ section }) => {
  return (
    <FlatList
      data={section.items}
      renderItem={({ item }) => <RecentOfferCard item={item} />}
      // 纵向是默认行为，无需额外设置horizontal
    />
  );
};

3. 确保数据源为有效数组 #

报错的直接触发点是FlatList的data为undefined，FlatList会读取数组的length属性，所以必须确保categories、popularOffers、latestOffers都是已初始化的数组（哪怕是空数组）：

// 初始化数据源，避免undefined
const categories = []; // 替换为你的实际数据
const popularOffers = [];
const latestOffers = [];

最终完整代码示例 #

// 初始化数据源
const categories = [];
const popularOffers = [];
const latestOffers = [];

const sections = [
  { index: 0, type: "categories", title: null, items: categories },
  { index: 1, type: "popular", title: null, items: popularOffers },
  { index: 2, type: "recent", title: "Recently Added", items: latestOffers },
];

const renderCategories = ({ section }) => {
  return (
    <FlatList
      data={section.items}
      horizontal
      renderItem={({ item }) => <CategoryCard item={item} />}
    />
  );
};

const renderPopular = ({ section }) => {
  return (
    <FlatList
      data={section.items}
      horizontal
      renderItem={({ item }) => <PopularOfferCard item={item} />}
    />
  );
};

const renderRecent = ({ section }) => {
  return (
    <FlatList
      data={section.items}
      renderItem={({ item }) => <RecentOfferCard item={item} />}
    />
  );
};

// 组件渲染
<SectionList
  sections={sections}
  renderSectionHeader={({ section }) => {
    switch (section.type) {
      case "categories":
        return renderCategories(section);
      case "popular":
        return renderPopular(section);
      case "recent":
        return renderRecent(section);
      default:
        return null;
    }
  }}
  renderItem={() => null}
  stickySectionHeadersEnabled={false}
/>

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