I have problem with line:

if (information && information.data && information.data.login == 1) navigation.navigate('DrawerNavigator')

i receive warning:

Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state. and my view is not render

but if information.data.login == 0 and invoking is this line if (information && information.data && information.data.login == 0) navigation.navigate('StackNavigator') everything is ok and my view render.

Full code:

import React, { Component } from 'react';
import { View, ActivityIndicator } from 'react-native';
import { connect } from "react-redux";
import { postDeviceid } from '../actions/deviceid';
import { ErrorScreen } from './ErrorScreen';
import { styles } from './AppScreen.style';
import PropTypes from 'prop-types';

class AppScreen extends Component {
  
  ponentDidMount() {
    this.props.dispatch(postDeviceid());
  };

  render() {
    const { information, error, loading, navigation } = this.props;
    const isLoged = () => {
      if (loading) {
        return <ActivityIndicator size="large" color="#0000ff" />
      }
      if (error && error.status > 0) {
        return <ErrorScreen error={error}></ErrorScreen>
      } else {
      if (information && information.data && information.data.login == 0) navigation.navigate('StackNavigator')
      if (information && information.data && information.data.login == 1) navigation.navigate('DrawerNavigator')
      }
    };

    return (
      <View style={styles.container}>
        {isLoged()}
      </View>
    );
  }
};

const mapStateToProps = ({ deviceid }) => ({
  information: deviceid.information,
  error: deviceid.error,
  loading: deviceid.loading
});

AppScreen.propTypes = {
  loading: PropTypes.bool.isRequired,
  error: PropTypes.array.isRequired,
  information: PropTypes.object.isRequired
};

export default connect(mapStateToProps)(AppScreen);

I have problem with line:

if (information && information.data && information.data.login == 1) navigation.navigate('DrawerNavigator')

i receive warning:

Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state. and my view is not render

but if information.data.login == 0 and invoking is this line if (information && information.data && information.data.login == 0) navigation.navigate('StackNavigator') everything is ok and my view render.

Full code:

import React, { Component } from 'react';
import { View, ActivityIndicator } from 'react-native';
import { connect } from "react-redux";
import { postDeviceid } from '../actions/deviceid';
import { ErrorScreen } from './ErrorScreen';
import { styles } from './AppScreen.style';
import PropTypes from 'prop-types';

class AppScreen extends Component {
  
  ponentDidMount() {
    this.props.dispatch(postDeviceid());
  };

  render() {
    const { information, error, loading, navigation } = this.props;
    const isLoged = () => {
      if (loading) {
        return <ActivityIndicator size="large" color="#0000ff" />
      }
      if (error && error.status > 0) {
        return <ErrorScreen error={error}></ErrorScreen>
      } else {
      if (information && information.data && information.data.login == 0) navigation.navigate('StackNavigator')
      if (information && information.data && information.data.login == 1) navigation.navigate('DrawerNavigator')
      }
    };

    return (
      <View style={styles.container}>
        {isLoged()}
      </View>
    );
  }
};

const mapStateToProps = ({ deviceid }) => ({
  information: deviceid.information,
  error: deviceid.error,
  loading: deviceid.loading
});

AppScreen.propTypes = {
  loading: PropTypes.bool.isRequired,
  error: PropTypes.array.isRequired,
  information: PropTypes.object.isRequired
};

export default connect(mapStateToProps)(AppScreen);

• javascript
• reactjs
• react-native
• redux
• react-navigation

Share Improve this question Follow asked Feb 15, 2019 at 10:38 15kprogrammer15kprogrammer 6711 gold badge22 silver badges77 bronze badges 1

• You should not use setState or something similar in your render function, refer to this answer: stackoverflow./a/39542218/6114081 – Eliâ Melfior Commented Feb 15, 2019 at 10:48

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

This is because you're calling a state transition (navigation.navigate) inside your render function. You want to call this when the ponent has mounted and then render. You can use your props to conditionally render. So for example, if the loading state of true is passed in, test for it and return your loading ponent inside the render method.

Keep your logic outside of the render method because it should be pure.

The render() function should be pure, meaning that it does not modify ponent state, it returns the same result each time it’s invoked, and it does not directly interact with the browser.

If you need to interact with the browser, perform your work in ponentDidMount() or the other lifecycle methods instead. Keeping render() pure makes ponents easier to think about.

https://reactjs/docs/react-ponent.html#render

import React, { Component } from "react";
import { View, ActivityIndicator } from "react-native";
import { connect } from "react-redux";
import { postDeviceid } from "../actions/deviceid";
import { ErrorScreen } from "./ErrorScreen";
import { styles } from "./AppScreen.style";
import PropTypes from "prop-types";

class AppScreen extends Component {
  state = {};

  ponentDidMount() {
    this.props.dispatch(postDeviceid());
    this.isLoged();
  }

  isLoged = () => {
    const { information, navigation } = this.props;

    if (information && information.data && information.data.login == 0)
      navigation.navigate("StackNavigator");
    if (information && information.data && information.data.login == 1)
      navigation.navigate("DrawerNavigator");
  };

  render() {
    const { information, error, loading, navigation } = this.props;

    if (loading) {
      return <ActivityIndicator size="large" color="#0000ff" />;
    }
    if (error && error.status > 0) {
      return <ErrorScreen error={error} />;
    }

    return <View style={styles.container}>
    Youre page content
    </View>;
  }
}