ReactNativeNews
ReactNativeNews copied to clipboard
tabalt
Error when I push to details route
I'm not sure why i get this - but everytime when i attempt to push the rowData (news piece object) to the details component I get an infinite amount of errors stating "cannot update during an existing state transition" as shown below:
Here's my code:
var React = require('react-native');
var {
View,
Image,
StyleSheet,
Text,
ScrollView,
ActivityIndicatorIOS,
ListView,
TouchableHighlight,
} = React;
//additional libraries
var Parse = require('parse/react-native');
//var Reflux = require('reflux');
//dynamic component references
var ArticlePreview = require('./exp_base_components/article-preview');
var Api = require('../utils/api');
var FeedStore = require('../stores/feed-store');
var ArticleDetails = require('./exp_base_components/article-details');
var Spinner = require('react-native-spinkit');
//var Actions = require('../../actions');
//dimensions
var Dimensions = require('Dimensions');
var window = Dimensions.get('window');
module.exports = React.createClass({
componentWillMount: function() {
Parse.User.currentAsync()
.then((user) => { this.setState({user: user}); })
},
getInitialState: function() {
var getSectionData = (dataBlob, sectionID) => {
//console.log("SectionID GIS, getSectionData: " + sectionID);
return dataBlob[sectionID];
}
var getRowData = (dataBlob, sectionID, rowID) => {
//console.log("RowID GIS, getRowData: " + rowID);
return dataBlob[sectionID + ':' + rowID];
}
return {
user: null,
isLoaded: false,
dataSource : new ListView.DataSource({
getSectionData : getSectionData,
getRowData : getRowData,
rowHasChanged : (row1, row2) => row1 !== row2,
sectionHeaderHasChanged : (s1, s2) => s1 !== s2
}),
}
},
componentDidMount: function() {
//console.log(this.state.user);
var personalFeed = null;
var Onboarding = Parse.Object.extend("Onboarding");
var query = new Parse.Query(Onboarding);
query.equalTo("userObjectId", Parse.User.current());
var that = this;
query.find({
success: function(result) {
console.log("Successfully retrieved " + result.length + " users!");
var object = result[0];
console.log(object.id);
// Do something with the returned Parse.Object values
console.log(object.get('interests'));
that.organizeData(object.get('interests'));
},
error: function(error) {
console.log("Error: " + error.code + " " + error.message);
}
});
},
organizeData: function(personalFeed) {
var data_store = null;
//get the latest articles on page load
//this will pre-fill out articles state
FeedStore.getArticles(personalFeed)
.then((data) => {
console.log("================");
console.log("data is at home");
console.log(data);
console.log("================");
var entries = data,
length = entries.length,
dataBlob = {},
sectionIDs = [],
rowIDs = [],
entry,
sectionID,
rowID,
i;
console.log(entries.length);
for (i = 0; i < length; i++)
{
entry = entries[i];
//console.log(entry);
//add section/row to section id array
//mapping section id array for section data
sectionID = entry.title.replace(/\s+/g, '').toLowerCase() + i;
//console.log("SectionID = " + sectionID);
sectionIDs.push(sectionID);
dataBlob[sectionID] = entry.title;
//mapping row id array for row data
rowIDs[i] = []
rowID = sectionID;
// console.log("RowID = " + rowID);
rowIDs[i].push(rowID);
dataBlob[sectionID + ':' + rowID] = entry;
}
//console.log(dataBlob);
this.setState({
dataSource : this.state.dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs),
isLoaded : true,
});
}).done();
},
render: function() {
if (!this.state.isLoaded) {
return this.renderLoadingView();
}
return this.renderListView();
},
renderLoadingView: function() {
/*<ActivityIndicatorIOS
animating={!this.state.isLoaded}
style={[styles.activityIndicator, {height: 80}]}
size="large" />*/
return (
<View style={styles.container}>
<Spinner style={styles.spinner} isVisible={!this.state.isLoaded} size={50} type={'Arc'} color={'#FF0000'}/>
</View>
);
},
renderListView: function() {
return (
<View style={styles.container}>
<ListView
dataSource = {this.state.dataSource}
initialListSize = {5}
pageSize={5}
renderRow = {this.renderRow} />
</View>
);
},
renderRow: function (rowData, sectionID, rowID) {
/* TEST
console.log("Getting my rows on");
console.log(rowID);*/
//console.log(rowData);
//call to api to get articles from rss/api var Articles
//check for images
if (typeof rowData.mediaGroups === 'undefined')
{
return <ArticlePreview
category={rowData.categories[0]}
key={sectionID}
heartText={'2.9k'}
categoryPress={this.onCategoryDetailsPress}
selected={false}
source={require('../img/stock_image.png')}
text={rowData.title.toLowerCase().replace(' ','')}
onPress={this.onArticleDetailsPress(rowData)} />
} else
{
var url = rowData.mediaGroups[0].contents[0].url;
if (url.indexOf('w=150') > -1)
{
url.replace("w=150", "w=500");
}
var catsource = rowData.categories[0];
if (typeof catsource == "undefined")
{
catsource = "News";
}
return <ArticlePreview
category={catsource}
key={sectionID}
heartText={'2.9k'}
categoryPress={this.onCategoryDetailsPress}
selected={false}
source={{uri: url }}
text={rowData.title.toLowerCase().replace(' ','')}
onPress={this.onArticleDetailsPress(rowData)} />
}
},
onCategoryDetailsPress: function() {
//forward to sytled web view of categorical article feed
console.log("onCategoryDetailsPress");
},
onArticleDetailsPress: function(entry) {
//forward to sytled web view of article details given link
console.log("onArticleDetailsPress");
this.props.navigator.push({
name: 'articledetails',
passProps: {
entry: entry
}
});
},
/*
onChange: function(event, articles) {
this.setState({articles: articles}); //trigers re-render of component
}
*/
});
styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#000000',
},
activityIndicator: {
alignItems: 'center',
justifyContent: 'center',
},
spinner: {
marginBottom: 50,
},
});
It may be the Promise in your componentWillMount. This is a React issue though and should have nothing to do with redux-router. Also you might get a better answer on stackoverflow, which is a better platform for asking questions. If it then comes down to an problem caused by router, you can open up an issue.
