reactjs - 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 };
}
解决方案
推荐阅读
- java - 运行 Spring 测试时“加载工厂 org.apache.calcite.jdbc.CalciteJdbc41Factory 时出错”
- java - 如何在盒须图上显示项目标签
- python - 可以得到Qwidget的绝对位置吗?
- video - 如何将 showwaves 位置调整到 ffmpeg 中视频的底部?
- arrays - 为什么在打印字符串的情况下不使用取消引用?
- html - 使用 :before 和 :after 创建的 CSS 元素不显示
- javascript - 我可以在将 jsx 转换为简单的 HTML 字符串时使用它进行编写吗?
- java - Spring Boot FileLİst 下载 zip
- java - JavaFX16 警告:不支持的 JavaFX 配置:类是从“未命名模块 @***”加载的
- python - 将 Geopandas 数据框直接导出到压缩的 shapefile