使用 React Hooks 进行条件渲染：加载

Question

I am learning how to use React Hooks and have been stuck for many hours on something that's supposed to be very simple. I am trying to display aa text if the state variable "loading" is true. If it's false, I want to display something else. No matter what I try, "loading" is always false or at least, the UI does not appear to reflect its value.

here is the code:

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;

Any help will be more than welcome and I am sorry if this is very basic.

UPDATE: Here is the actual code I am working with. SetLoading is supposed to update the state variable to false but never does or at least, the UI des not render.

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;

Answer 1

You are immediately setting your setLoading state to false and therefore loading text might be rendering for fraction of second, or not at all, like a glitch. Try setting setLoading with a timeout and then you will see the intended behaviour.

 const TestScreen= (props) => { const [loading, setLoading ] = useState(true); useEffect(() => { setTimeout(()=>setLoading(false), 3000); }, []); if(loading) { return <Text>Hi</Text>; } else { return<Text>hey</Text> } }