Currently, I am attempting to retrieve information from a JSON file by utilizing the fetch method and then showcasing the data using a Listview React Native component. The data fetched is successfully stored in this.state.films, as evidenced by displaying the film's title with {this.state.films[0].title}. However, when trying to implement a Listview, all I get is "[]". What could be the issue? I am referring to the React Native documentation where I am merging two sections: "Networking" and "Using a list view", and using the provided JSON data. Any assistance would be greatly appreciated. Thank you!
Below is my code for index.windows.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TextInput,
ListView
} from 'react-native';
class AwesomeProject extends Component {
constructor(props) {
super(props)
this.state = { films: [] }
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
}
componentWillMount() {
fetch('http://facebook.github.io/react-native/movies.json')
.then((response) => {
return response.json()
})
.then((movies) => {
this.setState({ films: ds.cloneWithRows(movies.movie) })
})
}
render() {
return (
<View style={{paddingTop: 22}}>
<ListView
dataSource={this.state.films}
renderRow={(rowData) => <Text>{rowData.title}</Text>}
/>
</View>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);