javascript - 使用 React Hooks 进行条件渲染 : loading

Question

我正在学习如何使用 React Hooks，并且已经在一些本应非常简单的事情上停留了好几个小时。如果状态变量“正在加载”为真，我试图显示文本。如果它是假的，我想显示其他东西。无论我尝试什么，“正在加载”总是错误的，或者至少，UI 似乎没有反射(reflect)其值。

这是代码:

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;

非常欢迎任何帮助，如果这是非常基本的，我很抱歉。

更新:这是我正在使用的实际代码。 SetLoading 应该将状态变量更新为 false，但从来没有这样做，或者至少 UI 不渲染。

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

您立即将 setLoading 状态设置为 false，因此加载文本可能会渲染几分之一秒，或者根本不渲染，就像出现故障一样。尝试设置 setLoading 超时，然后您将看到预期的行为。

const TestScreen= (props) => {
        const [loading, setLoading ] = useState(true);
        useEffect(() => {
            setTimeout(()=>setLoading(false), 3000);
        }, []);

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

}