如何在react firebase挂钩中实现缓存？
如何在react firebase挂钩中实现缓存？
提问于 2021-05-25 12:19:02
我一直试图在反应-火源-钩中实现缓存，但是得到了这个错误。
React "useCollectionDataOnce“不能在回调中调用。必须在React函数组件或自定义React函数中调用。
我知道这是有条件的，但还有别的办法吗？顺便说一下，我正在跟踪这来实现缓存。
const [randomQuestions, setRandomQuestions] = React.useState([]);
const cachedData = localStorage.getItem("randomQuestions");
React.useEffect(() => {
if (cachedData) {
setRandomQuestions(JSON.parse(cachedData));
} else {
let [values, loading, error] = useCollectionDataOnce(
db
.collection("questions")
.where("tags", "array-contains-any", tags.length ? tags : [""])
.limit(10),
{ idField: "id" }
);
}
if (values) {
localStorage.setItem("randomQuestions", JSON.stringify(values));
setRandomQuestions(values);
}
});在代码中，我试图检查cachedData是否已经存在。如果没有，则查询和获取数据。如果是，那么设置randomQuestions。
回答 1
Stack Overflow用户
发布于 2021-05-26 15:29:33
React不能像声明的这里那样在条件内。您应该在if/else语句之外使用它。
查看文档 of useCollectionDataOnce，我发现该函数的变量是可选的，因此您可以定义一个auxiliar变量，根据需要在if/useCollectionDataOnce语句中填充该变量，并将其传递给useCollectionDataOnce。
const [randomQuestions, setRandomQuestions] = React.useState([]);
const cachedData = localStorage.getItem("randomQuestions");
React.useEffect(() => {
var query = "";
if (cachedData) {
setRandomQuestions(JSON.parse(cachedData));
query = "";
} else {
query = db
.collection("questions")
.where("tags", "array-contains-any", tags.length ? tags : [""])
.limit(10),
{ idField: "id" };
}
let [values, loading, error] = useCollectionDataOnce(query);
if (values) {
localStorage.setItem("randomQuestions", JSON.stringify(values));
setRandomQuestions(values);
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67687763
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号