时间戳

首页 > 解决方案 > 如何在本机加载屏幕后立即通过从firestore检索的数据设置状态变量？

javascript - 如何在本机加载屏幕后立即通过从firestore检索的数据设置状态变量？

问题描述

我想从 Firestore 中检索数据，然后将文档快照数据设置为状态变量。我把代码放在里面useEffect()。这里的状态变量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']} 
                ...

标签： javascriptreact-nativegoogle-cloud-firestore

解决方案

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

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

像这个前。

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

推荐阅读