我在从firebase获取数据时遇到了一个问题，我正在获取空数组

Question

从firebase检索数据时遇到错误我正在使用React JS和Firebase Firestore进行数据存储

问题是当我在应用程序开始时使用useEffect((钩子来获取数据时。并将数据保存到数组中，但当我刷新页面时，我得到了空数组。当我在代码中执行一些任务(如更改前端的文本(或在代码中进行更改(如console.log("Birds Details", birdsData)到console.log("birds details anytext", birdsData)((如编辑它们(时，数组将从firebase firestore获取数据。

我将分享我为完成任务而编写的代码和问题的屏幕截图。

所有导入

import { getDoc, orderBy, query, onSnapshot } from "firebase/firestore";
import { birdsDataCollectionRef } from "../../firestore.collections";

从firebase获取数据的代码

const [birdsData, setBirdsData] = useState([]);
useEffect(() => {
const q = query(birdsDataCollectionRef, orderBy("created", "desc"));
onSnapshot(q, (querySnapShot) => {
setBirdsData(
querySnapShot.docs.map((doc) => ({
id: doc.id,
data: doc.data(),
}))
);
});
console.log("bird details array", birdsData);
}, []);

我收到的空数据阵列来自控制台日志的空阵列图像

我在控制台日志上得到的响应

[]   ViewBirdsDetails.js:19
[]   ViewBirdsDetails.js:19

通过刷新页面从后面更改一些代码后得到的响应

更改代码后的响应图像而不刷新页面

我正在使用useState Hook和firebase firestore

请帮我解决我的问题。

Answer 1

正如用户KcH所评论的，这是预期的行为，因为从Firestore读取和设置状态都是异步操作。当您的console.log("bird details array", birdsData)代码运行时，这两个代码都还没有完成。

您可以通过添加更多日志来最容易地看到这一点：

useEffect(() => {
const q = query(birdsDataCollectionRef, orderBy("created", "desc"));
console.log('starting query');
onSnapshot(q, (querySnapShot) => {
console.log('got data');
});
console.log("started query");
}, []);

其输出为：

开始查询

已启动查询

获取数据

这可能不是您预期的顺序，但它完全按照设计工作，并解释了为什么您的日志显示一个空数组。

---

要解决这个问题，总是一样的：任何需要数据的代码，都需要在onSnapshot回调处理程序内部，从那里调用，或者以其他方式同步。您的setBirdsData就是这种同步机制的一个示例，但您的console.log不同步。

简单的修复方法是将数据记录在onSnapshot回调处理程序中：

useEffect(() => {
const q = query(birdsDataCollectionRef, orderBy("created", "desc"));
onSnapshot(q, (querySnapShot) => {
const data = querySnapShot.docs.map((doc) => ({
id: doc.id,
data: doc.data(),
}))
setBirdsData(data);
console.log("bird details array", data);
});
}, []);

因此，在这里，我们将日志记录移动到回调中以处理onSnapshot的异步特性，并将数据分配给一个局部变量以处理setBirdsData的异步特性。