如何在本机加载屏幕后立即通过从 Firestore 检索的数据设置 state 变量？

Question

I want to retrieve data from firestore and then set the documentsnapshot data to state variable. I put the code inside useEffect() . The state variable, document here, is undefined when the screen is loaded and can only be set after I refresh the app. How can the variable be set immediately after the screen is loaded? Below is the code snippet:

function ToBeReadDetails({route}){
const [document, setDocument] = useState();
const scrollView = useRef();
const bookRef = firestore().collection('BookStore').doc(Type).collection('Books').doc(id); 

useEffect(()=>{
        bookRef.get().then(doc=>{
            setDocument(doc.data());
        });
        console.log(document); 
    }, []);
return(
        <View>
            <ScrollView
            ref={scrollView}
            showsVerticalScrollIndicator={false}
            contentContainerStyle={{alignItems:"center"}}
            >
                <BookDetails Author={document['Author']} 
                ...

Answer 1

In the first render document will always be undefinded. since getting the data from the firestore will take time. it might take 5ms or 500ms depending on various elements, that you cant control, latency... etc.

The soultion to your problem is having a fix around that, either you have a loading state that shows up a loader til you get the document, og have condentional rendering that only renders when you get the document

like this ex.

document['Author'] && (<BookDetails Author={document['Author']})

Answer 2

In your render you have to wait for state to change. Like this,

return !document ?

    <View>Loading...</View>
    :
    <View>
            <ScrollView
            ref={scrollView}
            showsVerticalScrollIndicator={false}
            contentContainerStyle={{alignItems:"center"}}
            >
                <BookDetails Author={document['Author']} 
            </ScrollView>
    </View>