Предупреждение: невозможно обновить во время существующего перехода состояния (например, в `render`).

Question

У меня проблема со строкой:

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

я получаю предупреждение:

Предупреждение: невозможно обновить во время существующего перехода состояния (например, в пределах render).Методы рендеринга должны быть чистой функцией реквизита и состояния.и мой взгляд не отображается

, но если information.data.login == 0 и вызывает эту строку if (information && information.data && information.data.login == 0) navigation.navigate('StackNavigator') все в порядке, и мой взгляд отображается.

Полный код:

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 {
  
  componentDidMount() {
    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);

Answer 1

Это потому, что вы вызываете переход состояния (navigation.navigate) внутри вашей функции рендеринга.Вы хотите вызвать это, когда компонент смонтирован, а затем выполнить рендеринг.Вы можете использовать свой реквизит для условного рендеринга.Например, если передается состояние загрузки true, проверьте его и верните загружаемый компонент в метод рендеринга.

Держите свою логику вне метода рендеринга, потому что он должен быть чистым.

Функция render () должна быть чистой, то есть она не изменяет состояние компонента, она возвращаетодин и тот же результат каждый раз, когда он вызывается, и он не взаимодействует напрямую с браузером.

Если вам нужно взаимодействовать с браузером, вместо этого выполняйте свою работу в componentDidMount () или других методах жизненного цикла.Сохранение функции render () в чистоте облегчает понимание компонентов.

https://reactjs.org/docs/react-component.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 = {};

  componentDidMount() {
    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>;
  }
}