为什么存储在变量中的 JSX 代码从不渲染?
Why does JSX code stored in a variable never render?
理想情况下,此代码应检查用户是否已登录应用程序,如果已登录,则导航至主屏幕,如果未登录,屏幕应显示包含登录按钮和注册按钮的组件。
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 指示器加载但 welcomeButtons 组件从不呈现。此外,当用户未登录时,“用户未登录”会两次记录到控制台。
您正在将组件异步设置为您的变量,因此当您的组件 return JSX 表达式时,内容仍然包含 <ActivityIndicator />
元素。要实现此行为,您应该创建一个状态变量和 return 基于它的值的 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 官方文档:
理想情况下,此代码应检查用户是否已登录应用程序,如果已登录,则导航至主屏幕,如果未登录,屏幕应显示包含登录按钮和注册按钮的组件。
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 指示器加载但 welcomeButtons 组件从不呈现。此外,当用户未登录时,“用户未登录”会两次记录到控制台。
您正在将组件异步设置为您的变量,因此当您的组件 return JSX 表达式时,内容仍然包含 <ActivityIndicator />
元素。要实现此行为,您应该创建一个状态变量和 return 基于它的值的 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 官方文档: