2016-11-05 32 views
7

React-Native için çok yeni. Temel React-Native öğreticisini izleyerek JSON verilerini "https://facebook.github.io/react-native/movies.json" dan almaya çalışıyorum. Ben title ve description özelliklerini görüntüleyebilir ama çalıştığımda aşağıdaki hatayı alıyorum bir ListView kullanarak "filmler" özelliğini görüntülemek için:undefined bir nesne değildir ('allRowsIDs.length' değerlendiriliyor) (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> 
    ); 
    } 
} 

cevap

8

Başlangıçtaki sorun için this.state.dataSource kurdum olmasıdır 'init'. Bunun daha önce bildirdiğiniz veri kaynağına işaret etmesini istiyorsunuz. this.state = { dataSource: 'init', };

Buna: this.state = { dataSource: ds };

Ancak bu sadece yeni bir hata mesajı almak için gidiyor, değiştirmek eğer

Sen, ilk sorunu çözebilir. Objects are not valid as a React child...'un etkisine bir şey. Tüm nesne yerine basit bir dize döndürmek için render işlevinizi değiştirerek bunu düzeltebilirsiniz. Başlık ile başlamanızı ve oradan hareket etmenizi öneririm. Bu deneyin ve yolda olmalıdır:

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

+0

çalıştı, çok teşekkür ederiz! – rnboi05

+0

O zaman muhtemelen doğru olarak işaretlemelisiniz ;-) –

İlgili konular