Question

我正在学习如何使用React Hooks，并且已经在许多本应非常简单的东西上停留了多个小时。如果状态变量“ loading”为true，我试图显示文本。如果为假，我想显示其他内容。无论我做什么，“加载”总是错误的，或者至少，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;

任何帮助都将受到欢迎，如果这是非常基础的，我感到抱歉。

更新：这是我正在使用的实际代码。应该将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>
        }

}

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

1 个答案: