undefined nie jest obiektem (ocena "allRowsIDs.length") (React-Native)

Question

Jestem bardzo nowy w React-Native. Podążając za podstawowym samouczkiem React-Native, próbuję pobrać dane JSON z "https://facebook.github.io/react-native/movies.json". mogę wyświetlić title i description właściwości, ale gdy próbuję wyświetlić „Filmy” własność za pomocą ListView pojawia się następujący błąd:

undefined is not an object (evaluating 'allRowsIDs.length')

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

var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 

export default class AwesomeProject extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     dataSource: 'init', 
    }; 
    } 

    componentWillMount() { 
    fetch('https://facebook.github.io/react-native/movies.json') 
     .then((response) => response.json()) 
     .then((responseJson) => { 
     this.setState({ dataSource: ds.cloneWithRows(responseJson.movies) }); 
     }) 
     .catch((error) => { 
     console.error(error); 
     }); 
    } 

    render() { 
     return (
     <View style={styles.container}> 
      <ListView 
      dataSource={this.state.dataSource} 
      renderRow={(rowData) => <Text>{rowData}</Text>} 
      /> 
     </View> 
    ); 
    } 
} 

Answer 1

Początkowej problemem jest to, że masz ustawione this.state.dataSource do ciąg 'init'. Chcesz, aby wskazywało źródło danych, które zadeklarowałeś wcześniej.

można rozwiązać pierwszy problem, jeśli zmieni: this.state = { dataSource: 'init', };

do tego: this.state = { dataSource: ds };

jednak, że po prostu będzie Ci do nowego komunikatu o błędzie. Coś z tego powodu: Objects are not valid as a React child.... Możesz to naprawić, zmieniając funkcję renderowania, aby zwracał prosty ciąg, a nie cały obiekt. Zasugeruję, aby zacząć od tytułu i przejść od tego miejsca. Spróbuj tego i powinno być na swój sposób:

render() { return ( <View style={styles.container}> <ListView dataSource={this.state.dataSource} renderRow={(rowData) => <Text>{rowData.title}</Text>} /> </View> ); }