将 firestore 快照 return 推送到数组中

Question

我在从阵列中的 firebase 复制 onSnapshot 侦听器的映射 return 时遇到问题（但非常重要：我不知道不想使用状态语法):

  useEffect(() => {
    let copyChats = [];
    const unsubscribe = db.collection('chats').onSnapshot(snapshot =>

        (
            console.log(snapshot.docs.map(doc => ({
                    id: doc.id,
                    data: doc.data()
                }
            )))
        )
    )

    return unsubscribe;
}, [])

此代码return正确地显示了控制台中的内容：

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 中，但我做不到。我试过各种 spread 和 push 语法。

   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;
    }, [])

我唯一能得到的是一个空数组！就像上面的代码一样 return:

Array []

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

Answer 1

问题不在于在何处访问数组，而是何时访问数组。如果你运行调试器中的代码，或者在他的调用中添加 console.log("Hello")，你会看到 console.log(copyChats) 实际上运行s before copyChats = snapshot.docs.map 永远执行。所以这就解释了为什么数组是空的：它还没有被填充。

I don't want to use the state syntax

React 的状态正是将异步加载的数据传递给 UI 的机制。如果要在 UI 中呈现数据库中的数据，使用状态是正确的方法。

另见：

将 firestore 快照 return 推送到数组中

Push firestore snapshot return into an array

javascript

jsx

firebase

google-cloud-firestore