Cannot update during an existing state transition #2063
Comments
|
It could be React Navigation issue. Could you please rework your example with ReactNavigation only and check. |
|
I've tried with this similar code and it doesn't happen: import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Button
} from 'react-native';
import { StackNavigator } from 'react-navigation';
class HomeScreen extends Component {
static navigationOptions = {
title: 'Home',
};
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container_home}>
<Text style={styles.welcome}>
Home Screen
</Text>
<Button
onPress={() => navigate('Details')}
title="Details"
color="#ffffff"
/>
</View>
);
}
}
class DetailsScreen extends Component {
static navigationOptions = {
title: 'Details',
};
render() {
return (
<View style={styles.container_details}>
<Text style={styles.welcome}>
Details Screen
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container_home: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#333333',
},
container_details: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'gray',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
color:'#FFC300'
},
});
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
Details: { screen: DetailsScreen },
});
AppRegistry.registerComponent('react_navigation_test', () => SimpleApp); |
|
In case of me it this warning have next stacktrace: reactConsoleErrorHandler ExceptionsManager.js:71 |
|
It is strange why I can't reproduce it with Example project, can you? Anyway error is gone when you make top-level App as stateless component, please check |
|
Confirm. There are no warns, if top-level component with Router in render is stateless and rendered only once. |
|
I'm sorry but I don't understand what do you mean with stateless render. How can I avoid that message in my example? |
|
@aksonov would you mind commenting on this? What do you mean with top-level App as stateless component? I'm getting the same error as above and it is coming from mobx form the stacktrace. |
|
Check react docs about stateless components and check Example project: |
|
This is working now: import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
Button,
View
} from 'react-native';
import {
Scene,
Router,
Actions
} from 'react-native-router-flux';
const App = () => {
return (
<Router>
<Scene key="root">
<Scene key="home" component={Home} title="Home"/>
<Scene key="details" component={Details} title="Details"/>
</Scene>
</Router>
);
}
class Home extends Component {
render() {
return (
<View style={styles.container_home}>
<Text style={styles.welcome}>
Home Screen
</Text>
<Button
onPress={()=>Actions.details()}
title="Details"
color="#ffffff"
/>
</View>
);
}
}
class Details extends Component {
render() {
return (
<View style={styles.container_details}>
<Text style={styles.welcome}>
Details Screen
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container_home: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#333333',
},
container_details: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'gray',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
color:'#FFC300'
},
});
AppRegistry.registerComponent('react_native_router_flux', () => App); |
|
I don't understand what I'm doing wrong. This is my original code: class App extends Component {
renderBackButton(nav) {
...
return nav.navigationState.index ? (
<TouchableOpacity onPress={onPress} style={styles.backButtonStyle}>
{button}
</TouchableOpacity>
) : null;
}
render() {
let owner = this.props.owner, loggedIn;
try {
if (owner.user.user_id) {
loggedIn = true;
}
}
catch (e) {
loggedIn = false;
}
return (
<Router>
<Scene key="root" headerMode="screen" cardStyle={styles.cardStyle}>
<Scene key="LoginOrRegister" hideNavBar component={LoginOrRegister}
initial={loggedIn ? false : true}
title="Login or register"/>
<Scene key="login" hideNavBar={true} component={Login} title="Login"/>
<Scene key="requestPassword" hideNavBar={true} component={RequestPassword} title="Passwort vergessen"/>
....
</Scene>
</Router>
)
}
}
const selector = (state) => {
return {
owner: state.owner
}
};
export default connect(selector, actionCreators)(App);And this is what I transformed it to: const App = (owner) => {
console.log(owner);
let loggedIn;
try {
if (owner.user.user_id) {
loggedIn = true;
}
}
catch (e) {
loggedIn = false;
}
return (
<Router>
<Scene key="root" headerMode="screen" cardStyle={styles.cardStyle}>
<Scene key="LoginOrRegister" hideNavBar component={LoginOrRegister}
initial={loggedIn ? false : true}
title="Login or register"/>
<Scene key="login" hideNavBar={true} component={Login} title="Login"/>
<Scene key="requestPassword" hideNavBar={true} component={RequestPassword} title="Passwort vergessen"/>
......
</Scene>
</Router>
)
}
class BlaBla extends Component {
render() {
return <App owner={this.props.owner}/>
}
}
const selector = (state) => {
return {
owner: state.owner
}
};
export default connect(selector, actionCreators)(BlaBla);Any idea what I'm doing wrong? |
|
See code above
… 22 июля 2017 г., в 13:05, Daniel Dimitrov ***@***.***> написал(а):
I don't understand what I'm doing wrong.
This is my original code:
class App extends Component {
renderBackButton(nav) {
...
return nav.navigationState.index ? (
<TouchableOpacity onPress={onPress} style={styles.backButtonStyle}>
{button}
</TouchableOpacity>
) : null;
}
render() {
let owner = this.props.owner, loggedIn;
try {
if (owner.user.user_id) {
loggedIn = true;
}
}
catch (e) {
loggedIn = false;
}
return (
<Router>
<Scene key="root" headerMode="screen" cardStyle={styles.cardStyle}>
<Scene key="LoginOrRegister" hideNavBar component={LoginOrRegister}
initial={loggedIn ? false : true}
title="Login or register"/>
<Scene key="login" hideNavBar={true} component={Login} title="Login"/>
<Scene key="requestPassword" hideNavBar={true} component={RequestPassword} title="Passwort vergessen"/>
....
</Scene>
</Router>
)
}
}
const selector = (state) => {
return {
owner: state.owner
}
};
export default connect(selector, actionCreators)(App);
And this is what I transformed it to:
const App = (owner) => {
console.log(owner);
let loggedIn;
try {
if (owner.user.user_id) {
loggedIn = true;
}
}
catch (e) {
loggedIn = false;
}
return (
<Router>
<Scene key="root" headerMode="screen" cardStyle={styles.cardStyle}>
<Scene key="LoginOrRegister" hideNavBar component={LoginOrRegister}
initial={loggedIn ? false : true}
title="Login or register"/>
<Scene key="login" hideNavBar={true} component={Login} title="Login"/>
<Scene key="requestPassword" hideNavBar={true} component={RequestPassword} title="Passwort vergessen"/>
......
</Scene>
</Router>
)
}
class BlaBla extends Component {
render() {
return <App owner={this.props.owner}/>
}
}
const selector = (state) => {
return {
owner: state.owner
}
};
export default connect(selector, actionCreators)(BlaBla);
Any idea what I'm doing wrong?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.
|
|
@aksonov - I just did a little digging. Would you mind explaining why does the component need to be stateless? I have an App component that initialises my state, loads the redux store and then passes it to the mainApp which renders the scenes. Then I can read the part of the state I'm interested in and set which scene to render first, but I don't understand why is it now no go to connect the router to the state in v4? My code worked fine with v3. |
|
I am having the same problem. As suggested rewriting it as stateless component is no option for me because I pass props down from another |
|
@Stophface Maybe you need to reconsider architecture of your app. |
|
@aksonov Basically I am writing this https://www.grok-interactive.com/blog/react-native-selection-list/ inside a |
What was the issue ? Kindly explain ! |
I'm sorry for this newbie question but I can't understand what's happening.
This is my code:
And I am getting this message when I save with Hot Reloading:
Thanks in advance!
The text was updated successfully, but these errors were encountered: