2016-11-05 12 views
7

React-Nativeの新機能です。基本的なReact-Nativeチュートリアルの後、私は "https://facebook.github.io/react-native/movies.json"からJSONデータを取得しようとしています。あなたの最初の問題は、あなたがにthis.state.dataSourceを設定したということです未定義はオブジェクトではありません( 'allRowsIDs.length'を評価する)(React-Native)

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

答えて

8

:私はtitledescriptionプロパティを表示することができますが、私はListViewを使用して「映画」プロパティを表示しようとすると、私は次のエラーを取得します文字列'init'。以前に宣言したデータソースを指すようにします。

を変更する場合は、あなたの最初の問題を解決することができます。これに this.state = { dataSource: 'init', };

this.state = { dataSource: ds };

をしかし、それはちょうど新しいエラーメッセージにあなたを得るために起こっています。 Objects are not valid as a React child...の効果に何か。オブジェクト全体ではなく、単純な文字列を返すようにレンダリング関数を変更することで修正できます。タイトルから始め、そこから移動することをお勧めします。これを試してみて、あなたはあなたの方法にする必要があります:

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

+0

が働いていること、ありがとうございました! – rnboi05

+0

それからそれを正しいとマークするべきでしょう;-) –

関連する問題