javascript - 警告 : Cannot update during an existing state transition (such as within `render` )

Question

我的线路有问题:

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') 一切正常，我的 View 呈现。

完整代码:

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)。您希望在组件安装并渲染时调用此方法。您可以使用 Prop 进行条件渲染。例如，如果传入了 true 的加载状态，请对其进行测试并在 render 方法中返回您的加载组件。

将逻辑保留在渲染方法之外，因为它应该是纯粹的。

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.

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>;
  }
}