undefined không phải là một đối tượng (đánh giá 'allRowsIDs.length') (React-Native)

Question

Tôi rất mới đối với React-Native. Theo hướng dẫn React-Native cơ bản, tôi đang cố gắng lấy dữ liệu JSON từ "https://facebook.github.io/react-native/movies.json". Tôi có thể hiển thị title và description tính nhưng khi tôi cố gắng để hiển thị "phim" sở hữu sử dụng một ListView tôi nhận được lỗi sau:

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

vấn đề ban đầu của bạn là bạn đã thiết this.state.dataSource đến chuỗi 'init'. Bạn muốn điều đó trỏ đến nguồn dữ liệu mà bạn đã khai báo trước đó.

Bạn có thể giải quyết vấn đề đầu tiên của bạn, nếu bạn thay đổi: this.state = { dataSource: 'init', };

này: this.state = { dataSource: ds };

Tuy nhiên, đó chỉ là sẽ giúp bạn có được một thông báo lỗi mới. Một cái gì đó để có hiệu lực của Objects are not valid as a React child.... Bạn có thể sửa lỗi đó bằng cách thay đổi hàm render của bạn để trả về một chuỗi đơn giản thay vì toàn bộ đối tượng. Tôi sẽ đề nghị bạn bắt đầu với tiêu đề và di chuyển từ đó. Hãy thử điều này và bạn sẽ được trên con đường của bạn:

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