使用 SectionList 时无法读取未定义的属性“长度”

Posted 2023-02-16

【中文标题】使用 SectionList 时无法读取未定义的属性“长度”

【英文标题】：Cannot read property 'length' of undefined when using SectionList

【发布时间】：2018-11-06 01:10:54

【问题描述】：

我调用一个 api 来获取我的movieData API：https://obscure-reaches-65656.herokuapp.com/api/getCloseTime?city=Hsinchu&sTime=18&eTime=21

我认为SectionList 的数据是正确的，数据是一个包含很多对象的数组，但我仍然得到错误：

Cannot read property 'length' of undefined

不知道如何解决数据问题？

这里是console.log(movieData);：

这是关于我的类组件渲染：

render() 
    const movieData = this.props.searchTime;

    if (this.props.loading) 
      return <Spinner text='Loading...' />;
    
    console.log('movieData =>');
    console.log(movieData);

    return (
      <View>
        <SectionList
          renderSectionHeader=this.sectionComp
          renderItem=this.renderSectionItem
          sections=movieData
          ItemSeparatorComponent=() => <View><Text></Text></View>
          ListHeaderComponent=() => <View style= backgroundColor: '#25B960', alignItems: 'center', height: 30 ><Text style= fontSize: 18, color: '#ffffff' >Header</Text></View>
          ListFooterComponent=() => <View style= backgroundColor: '#25B960', alignItems: 'center', height: 30 ><Text style= fontSize: 18, color: '#ffffff' >Footer</Text></View>
        />
      </View>
    );
  

如果我设置一个测试数据testSections 而不是movieData 它的工作。

const testSections = [
   key: "A", data: [ title: "test1-1" ,  title: "test1-2" ,  title: "test1-3" ] ,
   key: "B", data: [ title: "test2-1" ,  title: "test2-2" ,  title: "test2-3" ,  title: "test2-4" ,  title: "test2-5" ] ,
   key: "C", data: [ title: "test3-2" ,  title: "test3-2" ] ,
   key: "W", data: [ title: "test4-1" ,  title: "test4-2" ,  title: "test4-3" , title: "test4-4" ,  title: "test4-5" ,  title: "4-6" ] ,
];

我的自定义渲染函数是这样的：

  renderSectionItem = (info) => 
    console.log('what is _renderItem info =>');
    console.log(info);
    const txt = '  ' + info.item.theaterCn;
    return <Text
      style= height: 60, textAlignVertical: 'center', backgroundColor: "#ffffff", color: '#5C5C5C', fontSize: 15 >txt</Text>
  

  sectionComp = (info) => 
    console.log('what is  _sectionComp info =>');
    console.log(info);
    const txt = info.section.key;
    return <Text
      style= height: 50, textAlign: 'center', textAlignVertical: 'center', backgroundColor: '#9CEBBC', color: 'white', fontSize: 30 >txt</Text>
  

我不知道为什么。

任何帮助将不胜感激。提前致谢。

【问题讨论】：

你使用的是movieData.length还是movieData.length()？

不，我只是将 movieData 放入 sections 中。我的movieData 结构就像我上传的照片一样。

【参考方案1】：

movieData 的数据结构不正确，SectionList 期望一个对象数组，其中每个对象应具有title 和data 属性，请查看文档here。因此，根据您的movieData，您需要将值转换为该结构，例如

示例

首先，将获取的数据转换成合适的结构

fetch('https://obscure-reaches-65656.herokuapp.com/api/getCloseTime?city=Hsinchu&sTime=18&eTime=21')
.then(r => r.json())
.then(r => 
  const movieData = r.reduce((r,s) => 
    r.push(title: s.theater, data: s.movie);
    return r;
  , []);

  this.setState( movieData );
);

转换数据后，只需将其传递给SectionList

<SectionList
      renderItem=(item, index, section) => <Text key=index>item.enName</Text>
      renderSectionHeader=(section: title) => (
        <Text style=fontWeight: 'bold'>title</Text>
      )
      sections=this.state.movieData
      keyExtractor=(item, index) => item.enName + index
/>

希望这会有所帮助！

【讨论】：

一开始我不知道should have title and data。你为我节省了很多天。非常感谢。

【参考方案2】：

我遇到了同样的错误：

无法从 deltaPacher.js 读取未定义长度的属性

我的解决方案是使用 React Native Debugger 而不是浏览器控制台。

只是放下它，所以它可能对某人有所帮助。