Не удается прочитать свойство 'длина' из неопределенного при использовании SectionList - PullRequest
Новая
       49

Не удается прочитать свойство 'длина' из неопределенного при использовании SectionList

0 голосов
/ 27 мая 2018

Я вызываю 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);:

enter image description here

Вот мой рендер компонента класса: 

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

Я надеваюне знаю почему.

Любая помощь будет оценена.Заранее спасибо.

Ответы [ 2 ]

0 голосов
/ 08 июня 2019

Я получаю ту же ошибку:

Невозможно прочитать свойство неопределенной длины из deltaPatcher.js

Мое решение заключалось в использовании вместо этого React Native Debuggerконсоли браузера.

просто удалив его, так что это может кому-то помочь.

0 голосов
/ 27 мая 2018

Структура данных movieData неверна, SectionList ожидайте массив объектов, где каждый объект должен иметь свойства title и data, посмотрите документацию здесь .Итак, согласно вашему movieData, вам необходимо преобразовать значения в эту структуру, например

Sample

Сначала преобразуйте извлеченные данные в правильную структуру 

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

Надеюсь, это поможет!

...