首页 > 解决方案 > firebase 和 react 项目中的各种请求

问题描述

我是一名初级反应开发人员并与 firebase 合作,我创建了一个使用 firebase 数据但被调用两次或更多次的组件,我需要帮助,谢谢。

使用效果

console.log('outside')

  useEffect(() => {
        console.log('inside')
        if (companie) {
            documents.getDocuments({
                companie,
                onComplete: (docs: CardRasterProps[]) => {
                    // setTam(docs.length);
                    loadData(docs);
                },
            });            
        }
        return () => { // ComponentWillUnmount in Class Component
            documents.setLoginActivities(false);
        }

    }, []);

当我从 firebase 获取所有数据时。

使用GetDocuments


const useGetDocuments = () => {
    const db = firebase.firestore();
    const controller = new AbortController();
    const [loadingActivities, setLoginActivities] = useState(false);

    const getDocuments = async (props: any) => {
        setLoginActivities(true);
        db.collection("documents")
            .where('intoRomaneio', '==', false)
            .where('companie', '==', props.companie)
            .get()
            .then((querySnapshot: any) => {
                const documents = querySnapshot.docs.map((doc: any) => {
                    return { ...doc.data(), uid: doc.id }
                });
                props.onComplete(documents);
                setLoginActivities(false);
            })
            .catch((error: any) => {
                setLoginActivities(false);
                console.log("erro: ", error);
            });
        return () => {
            const timeout = setTimeout(() => controller.abort(), 5000);
            clearTimeout(timeout);
        };
    };


    return { loadingActivities, getDocuments, setLoginActivities };
}

控制台日志在此处输入图像描述

标签: reactjsfirebaseapi

解决方案


推荐阅读