Условный рендеринг с помощью React Hooks: загрузка - PullRequest
Новая
       5

Условный рендеринг с помощью React Hooks: загрузка

0 голосов
/ 28 апреля 2020

Я учусь использовать React Hooks и уже много часов застрял на чем-то, что должно быть очень простым. Я пытаюсь отобразить текст, если переменная состояния "loading" имеет значение true. Если это неверно, я хочу показать что-то еще. Независимо от того, что я пытаюсь, «загрузка» всегда ложна или, по крайней мере, пользовательский интерфейс не отображает его значение.

вот код: 

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;

Любая помощь будет более чем приветствую, и я извиняюсь, если это очень просто c.

ОБНОВЛЕНИЕ: Вот фактический код, с которым я работаю. Предполагается, что 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;

1 Ответ

1 голос
/ 28 апреля 2020

Вы немедленно устанавливаете для своего состояния 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>
        }

}
...