2016-10-27 5 views
-1

Попытка создать представление списка из этого API, но я получаю эту ошибкуРеагировать Native ListView - TypeError: Не удается прочитать свойство «cloneWithRows» неопределенных (...)

TypeError: Не удается прочитать свойство «cloneWithRows» неопределенных (...)

Возможно, это легко исправить, но я смущен!

Heres мой код

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    ListView 
} from 'react-native'; 

var heros = []; 

class Heros extends Component { 
    constructor(props) { 
    super(props) 
    var dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 != r2}) 
    this.state = { 
     peopleDataSource: dataSource.cloneWithRows(heros) 
    } 
    } 

    componentDidMount() { 
    this.getHeros(function(json){ 
    heros = json; 
    this.setState = ({ 
     datasource: this.state.dataSource.cloneWithRows(heros), 
     isLoading:false 
    }) 
    }.bind(this)); 

    } 

    getHeros(callback) { 
    var url = "https://api.lootbox.eu/xbl/us/Food%20Market/competitive-play/heroes"; 
    fetch(url) 
    .then(response => response.json()) 
    .then(json => callback(json)) 
    .catch(error => console.log(error)); 
    } 

    render() { 
    return (
     <View> 
     <ListView 
      style={{marginTop: 100}} 
      dataSource={this.state.peopleDataSource} 
      renderRow={(person) => { return this._renderPersonRow(heros) 
      enableEmptySections={true} }} /> 
     </View> 
    ) 
    } 

    _renderPersonRow(person) { 
    return (
     <View style={styles.personRow}> 
     <Text style={styles.PersonName}> {person.name} </Text> 
     </View> 
    ) 
    } 
} 

module.exports = Heros;

ответ

2

Ваша переменная хранилища данных имеет имя peopleDataSource (объявлено в конструкторе), но вы пытаетесь получить к ней доступ с помощью this.state.dataSource. Он должен быть this.state.peopleDataSource. Должно быть:

this.setState = ({ 
    peopleDataSource: this.state.peopleDataSource.cloneWithRows(heros), 
    isLoading:false 
}) 
Смежные вопросы