Ad
ListView.DataSource Looping Data For React Native
When I do a Console.log(this.state.dataSource) I get the image as below, I'm currently getting "Row goes here!"x 4 because the API return 4 results.
I tried to retrieve the user data like email but it wont "loop" and print accordingly.
I'm not exactly sure how this code works, comments would help abit.Please Advice
var messagesTab = React.createClass({
componentWillMount: function() {
fetch('https://randomuser.me/api/?results=4')
.then(res => res.json())
.then(res => this.updateDataSource(res));
},
getInitialState: function() {
return {
dataSource: new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
})
};
},
updateDataSource: function(data){
this.setState({
dataSource: this.state.dataSource.cloneWithRows(data)
})
},
renderRow: function (){
return (
<View>
<Text>Row goes here!</Text>
</View>
);
},
render: function(){
console.log(this.state.dataSource);
return (
<View style={ styleseact.container }>
<ListView dataSource={ this.state.dataSource } renderRow={ this.renderRow } />
</View>
);
}
});
I got this when I did a console.log(data); on renderRow
Ad
Answer
You're overwriting your DataSource declaration. Split up the declaration and update.
Declare this before React.createClass
:
var ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2
});
Remove it from getInitialState
:
getInitialState: function() {
return {
dataSource: ds.cloneWithRows([])
};
},
And reference it in the update function:
updateDataSource: function(data){
this.setState({
dataSource: ds.cloneWithRows(data)
})
},
Ad
source: stackoverflow.com
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad