将firestore快照返回推入数组

Question

我在复制onSnapshot的映射返回时遇到问题(但非常重要的是:我不想使用状态语法):

useEffect(() => {
let copyChats = [];
const unsubscribe = db.collection('chats').onSnapshot(snapshot =>
(
console.log(snapshot.docs.map(doc => ({
id: doc.id,
data: doc.data()
}
)))
)
)
return unsubscribe;
}, [])

这段代码正确返回控制台中的内容:

Array [
Object {
"data": Object {
"chatName": "presidentielle",
},
"id": "8DRKgDCW54Zt4yf1anoR",
},
Object {
"data": Object {
"chatName": "titi",
},
"id": "9MudmtUfi9nGiWMpwHGk",
},
Object {
"data": Object {
"chatName": "essais",
},
"id": "Hi5a8FpDaf7EwwwpmOXn",
},
Object {
"data": Object {
"chatName": "titi",
},
"id": "ZnX3jaRkrJN4oiNCC3un",
},
Object {
"data": Object {
"chatName": "essais",
},
"id": "dPruNs46X0jbhr0sL7xk",
},
Object {
"data": Object {
"chatName": "test chat",
},
"id": "vxs7RdSBER83TOCPHko1",
},
]
Array [
Object {
"data": Object {
"chatName": "presidentielle",
},
"id": "8DRKgDCW54Zt4yf1anoR",
},
Object {
"data": Object {
"chatName": "titi",
},
"id": "9MudmtUfi9nGiWMpwHGk",
},
Object {
"data": Object {
"chatName": "essais",
},
"id": "Hi5a8FpDaf7EwwwpmOXn",
},
Object {
"data": Object {
"chatName": "titi",
},
"id": "ZnX3jaRkrJN4oiNCC3un",
},
Object {
"data": Object {
"chatName": "essais",
},
"id": "dPruNs46X0jbhr0sL7xk",
},
Object {
"data": Object {
"chatName": "test chat",
},
"id": "vxs7RdSBER83TOCPHko1",
},
]

我要做的是将这个数据模型复制到数组copyChats我做不到我试过各种各样的传播和语法。

useEffect(() => {
let copyChats = [];
const unsubscribe = db.collection('chats').onSnapshot(snapshot =>
(
copyChats = snapshot.docs.map(doc => ({
id: doc.id,
data: doc.data()
}
))
)
)
console.log(copyChats);
return unsubscribe;
}, [])

我唯一能得到的是一个空数组，就像上面给我这个返回的代码一样:

Array []

如果你有任何想法。谢谢你. .

Answer 1

问题不在于在访问数组，而在于在你访问它。如果在调试器中运行代码，或者在调用中添加一个console.log("Hello")，您将看到console.log(copyChats)实际上在之前运行。copyChats = snapshot.docs.map从未执行过。这就解释了为什么数组是空的:它还没有被填充。

我不想使用状态语法

React的状态正是传递异步加载到UI的数据的机制。如果你想在UI中呈现来自数据库的数据，使用state是正确的方法。

也看到:

• React native call function in text element
• React在SetState
之后不更新渲染
• 在React和firebase中使用Map