无法将数据推送到 Firestore + React Hooks 中的数组

Question

我想将 UID 收集到 Firestore 中的 Array 字段。成功抓取了每个用户的数据，但是我不能列出来。

contactArray: {"0": "xxxxxxxxxxxx", "1": "yyyyyyyyyyyy"}

可以检索用户数据，但无法将问题显示为列表。我可以推动它，但它由于某种原因消失了。

警告：

期望在箭头函数中返回一个值

使用效果

const [contactList, setContactList] = useState([])

useEffect(() => {
  if (currentUserUid) {
    firestore.doc(`users/${currentUserUid}`).get().then(userSnapshot => {
      const { contactUidList } = userSnapshot.data()
      return contactUidList
    })
      .then((contactUidList) => {
        contactUidList.map((contactUid) => {
          firestore.doc(`users/${contactUid}`)
            .onSnapshot(userQuerySnapshot => {
              contactList.push(userQuerySnapshot.data())
              setContactList(contactList)
            })
        })
      })
  }
}, [currentUserUid, contactList])

查看

  return (
    <ul>
      {contactList.map((contact, idx) => {
          return(<p>{contact.name}</p>)
       ))
  )

Answer 1

数据从 Firestore（和大多数云 API）异步加载。出于这个原因，您需要将contactList 保持在状态中，并在那里进行更新。当你这样做时，React 知道当结果从数据库返回（或更新）时更新 UI。

比如：

const [contactList, setContactList] = useState(0);
useEffect(() => {
  if (currentUserUid) {
    firestore.doc(`users/${currentUserUid}`).get().then(userSnapshot => {
      const { contactArray } = userSnapshot.data()
      return contactArray
    })
      .then((contactArray) => {
        contactUidList.map((contactUid) => {
          firestore.doc(`users/${contactUid}`)
            .onSnapshot(userQuerySnapshot => {
              contactList.push(userQuerySnapshot.data())
              setContactList(contactList)
            })
        })
      })
  }
}, [currentUserUid, contactList])