为什么存储在变量中的 JSX 代码从不渲染？答案

【问题标题】：Why does JSX code stored in a variable never render?为什么存储在变量中的 JSX 代码从不渲染？
【发布时间】：2020-08-15 02:55:10
【问题描述】：

理想情况下，此代码应检查用户是否已登录应用，如果已登录，则导航到主屏幕，如果未登录，则屏幕应显示包含登录按钮和注册按钮的组件。

import React, { useEffect, useState } from "react";
import { View, ActivityIndicator } from "react-native";
import WelcomeButtons from "../components/welcomeButtons";
import Firebase from "../fireConfig";

const LoadingScreen = (props) => {
  let content = <ActivityIndicator />;
  useEffect(() => {
    Firebase.auth().onAuthStateChanged(function (user) {
      if (user) {
        console.log("User Signed in");
        props.navigation.navigate("Home");
      } else {
        content = (
          <WelcomeButtons
            onSignUpPress={() => props.navigation.navigate("Register")}
            onSignInPress={() => props.navigation.navigate("Login")}
          />
        );
        console.log("User not signed in");
      }
    });
  });
  return <View>{content}</View>;
};

export default LoadingScreen;

当用户未登录时，Activity Indicator 会加载，但 welcomeButtons 组件永远不会呈现。此外，当用户未登录时，控制台会记录两次“用户未登录”。

【问题讨论】：

标签： react-native react-native-firebase

【解决方案1】：

您正在将组件异步设置为变量，因此当您的组件返回 JSX 表达式时，内容仍然包含 <ActivityIndicator /> 元素。要实现这种行为，您应该创建一个状态变量并根据它的值返回 JSX，如下所示

import React, { useEffect, useState } from "react";
import { View, ActivityIndicator } from "react-native";
import WelcomeButtons from "../components/welcomeButtons";
import Firebase from "../fireConfig";

const LoadingScreen = (props) => {
  let content = <ActivityIndicator />;
  const [signedIn, setSignedIn] = useState(false); //false is the default value

  useEffect(() => {
    Firebase.auth().onAuthStateChanged(function (user) {
      if (user) {
        console.log("User Signed in");
        props.navigation.navigate("Home");
        setSignedIn(false);
      } else {
        setSignedIn(true);
        console.log("User not signed in");
      }
    });
  });

  if (signedIn) {
    content = (
      <WelcomeButtons
        onSignUpPress={() => props.navigation.navigate("Register")}
        onSignInPress={() => props.navigation.navigate("Login")}
      />
    );
  }
  return <View>{content}</View>;
};

export default LoadingScreen;

要了解有关状态的更多信息，您可以在此处查看 React 官方文档：

https://reactjs.org/docs/state-and-lifecycle.html

【讨论】：