时间戳

首页 > 解决方案 > 协助从缓存中获取数据

javascript - 协助从缓存中获取数据

问题描述

这个屏幕有点工作。第一次打开屏幕时，只显示启动画面。返回然后再次打开屏幕然后显示数据。我需要帮助从缓存中获取数据并在屏幕第一次打开时显示它。

我需要屏幕显示启动画面，同时从缓存中保存和检索数据，然后在您第一次打开屏幕时显示实际数据。

    const [dataList1, setDataList1] = useState([]);
    const [cacheData, setCacheData] = useState(null);

    // Function to get data from cache
    const getDataFromCache = async () => {
        const data = await cache.get(cacheKeys.BENEFITS_CACHE_KEY);

        setCacheData(data);
    }

    // Get data from cache
    useEffect(() => {
        getDataFromCache();
    }, [])

    // Store data to cache
    useEffect(() => {
        if (dataList1.length > 1) cache.store(cacheKeys.BENEFITS_CACHE_KEY, dataList1);
    }, [dataList1]);


    useEffect(() => {
        
        var benefitsArr = [];
        var benefitsDetailsArr = [];

        const unsubscribe = auth.onAuthStateChanged((authUser) => {

            if (authUser) {

                db
                .collection('members')
                .doc(authUser.uid)
                .get()
                .then(user => {

                    benefitsArr.push(...user.data().benefits);

                    db
                    .collection('benefits')
                    .get()
                    .then(snapshots => {
                        snapshots.forEach(doc => {
                            if (benefitsArr.includes(doc.id))
                            {
                                benefitsDetailsArr.push(doc.data());
                            }
                            
                        })

                        // Save results to a useState constant
                        setDataList1(dataList1 => ([...dataList1, ...benefitsDetailsArr]));
                    })
                    .catch(error => console.log(error))

                })
                .catch(error => console.log(error))

            }
        })

        return unsubscribe;

    }, []);

    if (!cacheData) return <SplashScreen />

标签： javascriptreact-nativegoogle-cloud-firestorefirebase-authentication

解决方案

是因为这条线

if (!cacheData) return <SplashScreen />

你应该创建一个显示/隐藏状态然后做

if (show) return <SplashScreen />

然后在你的功能

const getDataFromCache = async () => {
    const data = await cache.get(cacheKeys.BENEFITS_CACHE_KEY);

    setCacheData(data);
    setShow(false) // <-- hide the splash
}

推荐阅读