Предупреждение: невозможно обновить во время существующего перехода состояния (например, в `render`)
У меня проблема со строкой:
if (information && information.data && information.data.login == 1) navigation.navigate('DrawerNavigator')
я получаю предупреждение:
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
но если 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);
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Это потому, что вы вызываете переход состояния (navigation.navigate) внутри вашей функции рендеринга. Вы хотите вызвать это, когда компонент смонтирован, а затем визуализировать. Вы можете использовать свой реквизит для условного рендеринга. Так, например, если передано состояние загрузки true, проверьте его и верните загрузочный компонент внутри метода рендеринга.
Держите свою логику вне метода рендеринга, потому что она должна быть чистой.
The render() function should be pure, meaning that it does not modify component 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 componentDidMount() or the other lifecycle methods instead. Keeping render() pure makes components easier to think about.
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>;
}
}
Можете ли вы объяснить мне, почему в случае со StackNavigator это работает? Я имею в виду, что представление рендерится, но в случае с DrawerNavigator представление не рендерится?
Вы не должны использовать setState или что-то подобное в своей функции рендеринга, обратитесь к этому ответу: stackoverflow.com/a/39542218/6114081