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

Question

我想从 Firestore 中检索数据，然后将文档快照数据设置为 state 变量。 我将代码放在useEffect()中。 state 变量，这里的document ，在屏幕加载时未定义，只能在我刷新应用程序后设置。 如何在屏幕加载后立即设置变量？ 下面是代码片段：

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

在第一个渲染文档中将始终未定义。 因为从 Firestore 获取数据需要时间。 这可能需要 5 毫秒或 500 毫秒，具体取决于您无法控制的各种元素、延迟……等。

您的问题的解决方案是解决这个问题，或者您有一个加载 state，它会显示一个加载器，直到您获得文档，或者只有在您获得文档时才会渲染的条件渲染

像这个前。

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

Answer 2

在您的渲染中，您必须等待 state 发生变化。 像这样，

return !document ?

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