使用SectionList时出现Cannot read property 'length' of undefined错误求助

我最近在React Native里用SectionList展示电影数据时踩了个坑，明明调用API获取的movieData看起来是符合要求的数组格式，但一直抛出Cannot read property 'length' of undefined的错误，折腾了好一阵，想请大家帮忙排查下问题。

背景信息 #

• 调用的API地址：https://obscure-reaches-65656.herokuapp.com/api/getCloseTime?city=Hsinchu&sTime=18&eTime=21
• 预期返回格式：包含多个section对象的数组（每个对象需有title和data字段，符合SectionList的sections属性要求）
• 目前已做的排查：
  • 用console.log(movieData)打印了获取到的数据，从截图看结构符合预期
  • 编写了类组件的render代码，同时准备了可正常运行的测试数据testSections
  • 自定义了SectionList的渲染函数

可能的问题方向&解决方案 #

结合自己的排查和SectionList常见的坑，总结了几个可能的原因和对应的解决办法：

1. 数据加载时机导致的初始值问题

SectionList渲染时，API请求还未完成，此时movieData是初始的undefined，组件尝试读取它的length就会报错。

解决办法：
在组件的初始state里，把movieData设为空数组[]，而非默认的undefined：

constructor(props) {
  super(props);
  this.state = {
    movieData: [] // 初始化为空数组，避免undefined状态
  };
}

2. API返回数据存在嵌套结构

看起来返回的是数组，但实际可能包裹在某个对象属性里（比如{ data: [...] }），如果直接把整个响应结果赋值给movieData，那它其实是个对象而非数组，SectionList自然找不到length属性。

解决办法：
检查网络请求的响应结构（可在RN调试工具或浏览器DevTools的Network面板查看），确认数组所在的层级。比如如果返回是{ result: [...] }，那要把res.data.result赋值给movieData，而非res.data。

3. 缺少条件渲染判断

即使初始值设为空数组，也可以在render里加一层判断，确保数据就绪后再渲染SectionList，避免意外情况：

render() {
  const { movieData } = this.state;
  
  // 如果数据还没加载完成，显示加载提示
  if (!movieData || movieData.length === 0) {
    return <ActivityIndicator size="large" color="#0000ff" />;
  }

  return (
    <SectionList
      sections={movieData}
      renderItem={this.renderItem}
      renderSectionHeader={this.renderSectionHeader}
      keyExtractor={(item) => item.id.toString()}
    />
  );
}

4. 实际数据结构与测试数据不一致

虽然截图看起来结构对，但可能和能正常运行的testSections存在细微差异（比如某个section少了title字段，或者data字段是undefined），SectionList对sections的结构要求很严格，必须每个section都有title和data属性，且data是数组。

解决办法：
把testSections和API返回的movieData做逐字段对比，确保结构完全一致。可以用JSON.stringify()把两者转成字符串后对比，更容易发现差异。

如果大家还有其他可能的排查方向，或者需要我补充更多代码/截图细节，欢迎提出来！

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