React-native：从一个屏幕传递到另一个屏幕的错误

Question

我有一个我不明白的错误，我需要你的帮助。 该错误不会阻止我从一个屏幕转到另一个屏幕，但我想了解它。

错误是：“警告：在现有状态转换期间无法更新（例如在render内）。渲染方法应该是道具和状态的纯函数。”

我真的需要帮助和解释，谢谢你阅读我！

第一屏代码是：

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFirstConnection: true,
      status: 0,
      fontLoaded: false,
      isConnected: false
    };
  }

  async UNSAFE_componentWillMount() {
    let lang = await retrieveAppLang();

    if (lang.length == 2) {
      i18n.changeLanguage(lang);
    }
  }

  async componentDidMount() {
    let isConnected = await userSessionActive();

    await Font.loadAsync({
      FunctionLH: require("./assets/fonts/FunctionLH-Light.ttf"),
    });

    const data = await this.performTimeConsumingTask();
    if (data !== null && (isConnected === false || isConnected === true)) {
      this.setState({
        isFirstConnection: false,
        status: 1,
        fontLoaded: true,
        isConnected: isConnected
      });
    }
  }

  performTimeConsumingTask = async () => {
    return new Promise((resolve) =>
      setTimeout(() => {
        resolve("result");
      }, 1500)
    );
  };

  render() {
    if (this.state.status == 1) {
      if (this.state.isFirstConnection && this.state.fontLoaded) {
        return <SplashScreen />;
      } else if (this.state.isConnected === true) {
        // TODO : Use Navigation !
        return <Navigation screenProps={'MyTrips'}/>;
      } else {
        return <Navigation screenProps={'Authentication'}/>;
      }
    }

    return (
      <ImageBackground
        source={require("./assets/images/background.jpg")}
        style={{ flex: 1 }}
      >
        <View style={[styles2.container, styles2.containerCentered]}>
          <StatusBar hidden={true} />
          <View style={styles2.subContainer}>
            <Image
              style={styles2.logo}
              source={require("./assets/images/logo.png")}
            />
            <ActivityIndicator size="large" color="#43300E" />
            <Text>Loading data...</Text>
          </View>
        </View>
      </ImageBackground>
    );;
  }
}

第二个屏幕（我猜这是问题的根源）：

export default class MyTrips extends Component {
  constructor(props) {
    super(props);
    this.state = {
      location: null,
      errorMessage: null,
      measured: false,
      height: 0,
      value1: 0,
    };
  }
  handleLayout = (e) => {
    this.setState({
      measured: true,
      height: e.nativeEvent.layout.height + 1,
    });
  };
  render() {
    return (
      <ImageBackground
        source={require("../../assets/images/background.jpg")}
        style={styles.backgroundImage}
      >
        <Header
          backgroundImage={require("../../assets/images/bg-header.png")}
          backgroundImageStyle={{
          resizeMode: "stretch",
          }}
          centerComponent={{
            text: i18n.t("mytrips.title"),
            style: styles.headerComponentStyle,
          }}
          containerStyle={[styles.headerContainerStyle, { marginBottom: 0 }]}
          statusBarProps={{ barStyle: "light-content" }}
        />
        <ScrollView style={styles.containerScrollNoMargins}>
          <View style={{  width: '100%', height: height / 3 + 40}}>
            <WebView
              geolocationEnabled={true}
              source={{
                uri:
                  "https:blabla",
              }}
              originWhitelist={[
                "https://www.blabla.org",
                "https://www.hophop.com",
              ]}
              injectedJavaScript={`const meta = document.createElement('meta');
                meta.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-
                scale=0.5, user-scalable=0'); meta.setAttribute('name', 'viewport');
                document.getElementsByTagName('head')[0].appendChild(meta); `}
              scalesPageToFit={false}
              style={{ marginHorizontal: 0, backgroundColor: "transparent" }}
            />
          </View>
          <View style={styles.container}>
            <Text>{"\n"}</Text>
            <TouchableOpacity
              style={styles.touchable}
              onPress={() => this.props.navigation.navigate("TripsForm")}
            >
              <View style={styles.view}>
                <Text style={styles.textimg}>{i18n.t("mytrips.trip")}</Text>
              </View>
              <Image
                source={require("../../assets/images/btn-background.png")}
                style={styles.tripsimg}
              />
            </TouchableOpacity>
          </View>
          <View style={styles.container}>
            <Image
              source={require("../../assets/images/cadran.png")}
              style={styles.btnWithIcon}
            />
            <View style={[styles.row, { marginTop: 28 }]}>
              <Text style={styles.statText}>
                {i18n.t("stats.action.dist")}
                {"\n"}
                <AnimateNumber
                  value={10000}
                  countBy={100}
                  style={{
                    fontFamily: "FunctionLH",
                    fontSize: 24,
                    color: "#FFF",
                  }}
                />
              </Text>
            </View>
            <Text
              style={[styles.textimg, styles.measure]}
              onLayout={this.handleLayout}
            >
              0
            </Text>
            <Image
              source={require("../../assets/images/btn-background.png")}
              style={styles.cadran}
            />
          </View>
          <View style={styles.container}>
            <Image
              source={require("../../assets/images/hublo.png")}
              style={styles.btnWithIcon}
            />
            <View style={[styles.row, { marginTop: 28 }]}>
              <Text style={styles.statText}>
                {i18n.t("stats.action.flights")}
                {"\n"}
                <AnimateNumber
                  value={100}
                  countBy={1}
                  style={{
                    fontFamily: "FunctionLH",
                    fontSize: 24,
                    color: "#FFF",
                  }}
                />
              </Text>
            </View>
            <Text
              style={[styles.textimg, styles.measure]}
              onLayout={this.handleLayout}
            >
              0
            </Text>
            <Image
              source={require("../../assets/images/btn-background.png")}
              style={styles.cadran}
            />
          </View>
          <Text>{"\n"}</Text>
        </ScrollView>
      </ImageBackground>
    );
  }
}

Answer 1

我找到了解决方案，但我真的不明白为什么会出现错误...

而不是：

return <Navigation screenProps={'MyTrips'}/>;
      } else {
        return <Navigation screenProps={'Authentication'}/>;
      }

我直接导入了屏幕，这很有效：

return <MyTrips/>;
  } else {
    return <Authentication />;