Javascript 使用React钩子的条件渲染：加载

我正在学习如何使用React挂钩，并且已经在一些本应非常简单的东西上被困了好几个小时。 如果状态变量“loading”为true，我将尝试显示文本。如果为false，我想显示其他内容。 无论我尝试什么，“加载”总是错误的，或者至少，UI似乎没有反映其价值

代码如下：

import React, {useState, useEffect}  from 'react';
import {View, SafeAreaView, Text} from 'react-native';


const testScreen= (props) => {


        const [loading, setLoading ] = useState(true);



        useEffect(() => {

            setLoading(false);
        }, []);

        if(loading)
        {
          return <Text>Hi</Text>;
        }
        else
        {
          return<Text.Hey</Text>
        }

}

export default testScreen;

import React，{useState，useffect}来自“React”；
从“react native”导入{View，SafeAreaView，Text}；
常量测试屏幕=（道具）=>{
const[loading，setLoading]=useState（true）；
useffect（（）=>{
设置加载（假）；
}, []);
如果（装载）
{
返回Hi；
}
其他的
{
返回{
const topicCollection=firestore（）.collection（'Topics'）
。其中（“活动”，为“=”，为真）；
//主题挂钩
const[topics，setTopics]=useState（[]）；
const[loading，setLoading]=useState（true）；
//获取所有活动主题
useffect（（）=>{
返回topicCollection.onSnapshot（querySnapshot=>{
常量列表=[]；
querySnapshot.forEach（doc=>{
const{active，name}=doc.data（）；
list.push({
id:doc.id，
忙碌的
名称
});
});
设置主题（列表）；
设置加载（假）；
});
}, []);
常量renderTopics=（）=>{
返回(
topics.map（（项目）=>{
返回(
)
})
)
}
如果（装载）
{
返回(
你是干什么的
有兴趣吗？
)
}
否则，这永远不会运行
{
返回(
你是干什么的
有兴趣吗？
{renderTopics（主题）}
);
}
}
导出默认类别屏幕；

您立即将

设置加载

状态设置为false，因此加载文本可能会在几秒钟内呈现，或者根本不会呈现，就像出现故障一样。请尝试设置

设置加载

超时，然后您将看到预期的行为

const TestScreen=（道具）=>{
const[loading，setLoading]=useState（true）；
useffect（（）=>{
setTimeout（（）=>setLoading（false），3000）；
}, []);
如果（装载）
{
返回Hi；
}
其他的
{
海归
}
}

谢谢，我简化了代码。基本上，我先调用状态更新函数，然后再进行设置加载。状态更新函数setCategory可以在控制台日志中看到正在更新的类别。欢迎@user3604212。很高兴提供帮助。很抱歉误解。我的意思是，即使我做了一些事情，它也不起作用在调用setLoading（false）之前。请创建一个工作沙盒。您的代码似乎仍然没有更新。请看一看，我已经更新了原始帖子。

import React, {useState, useEffect}  from 'react';
import {View, SafeAreaView, Text, ActivityIndicator} from 'react-native';
import CategoryTag from '../Components/CategoryTag';
import firestore from '@react-native-firebase/firestore';

const CategoryScreen = (props) => {

    const topicCollection = firestore().collection('Topics')
    .where("active","==",true);

    //hooks for topics
    const [topics,setTopics] =  useState([]);
    const [loading, setLoading ] = useState(true);



    //get all active topics
    useEffect(() => {
      return topicCollection.onSnapshot(querySnapshot => {
        const list = [];
        querySnapshot.forEach(doc => {
          const { active, name } = doc.data();
          list.push({
            id: doc.id,
            active,
            name,
          });
        });

        setTopics(list);
        setLoading(false);
      });
    }, []);


    const renderTopics = () =>{

      return(
        topics.map((item) =>{

          return(
            <CategoryTag key = {item.id} 
            color={userTopics.includes(item.name) ?"#51c0cc":"#303239"} 
            name = {item.name}
            isSelected = {userTopics.includes(item.name)}
            handleClick = {addTopicToUserTopicCollection}

            />

          )

        })
      )
    }


    if(loading)
    {
      return (
        <SafeAreaView style={{flex:1, backgroundColor:"#455a65"}}>
            <View style={{width:200, padding:20, paddingTop:60}}>
                <Text style ={{fontSize:25, fontWeight:"bold", 
color:"#fff"}}>What are you</Text>
                <Text style ={{fontSize:22, color:"#fff"}}>interested in? 
</Text>

            </View>
            <View style={{flex:1, alignItems:"center", 
justifyContent:"center", alignSelf:"center"}}>

                <ActivityIndicator />
            </View>
        </SafeAreaView>

      )
    }
    else // this never runs
    {
      return (
        <SafeAreaView style={{flex:1, backgroundColor:"#455a65"}}>
            <View>
                <View style={{width:200, padding:20, paddingTop:60}}>
                <Text style ={{fontSize:25, fontWeight:"bold", 
color:"#fff"}}>What are you</Text>
                <Text style ={{fontSize:22, color:"#fff"}}>interested in? 
</Text>

                </View>
                <View style ={{flexDirection:"column", paddingTop:20}}>
                        <View style ={{padding:15, paddingTop:15, 
marginBottom:15, 
                        flexWrap:"wrap", flexDirection:"row"}}>

                          {renderTopics(topics)}

                        </View>
                 </View>
            </View>
        </SafeAreaView>

    );
    }

}

export default CategoryScreen;