flatlist 不呈現對象數組 [React-Native] [Firebase]

Question

我正在嘗試從 firebase 獲取 chatList 並且對於每個聊天，從用戶文檔中獲取用戶名，但是存儲在chats state 中的數組沒有迭代......

如果我從獲取朋友name的查詢中刪除等待，那么這個chats是可迭代的，但在這種情況下， chats /聊天chatList的temp或freind屬性的值是未定義的

const Chat = () => {
  const { currentUser } = useAuth();
  const [chats, setChats] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const chatListQuery = firestore()
      .collection('chatRoom')
      .where('members', 'array-contains', currentUser.uid)
      .where('group', '==', false)
      .orderBy('recentMessage.sendAt', 'desc');
    const unsubscribe =
      chatListQuery.onSnapshot((querySnapShot) => {
        const chatList = []

        querySnapShot.forEach(async (item) => {

          const temp = [];
          const freindId = item.data().members.filter((member) => member !== currentUser.uid);

          await firestore().collection('users').doc(freindId[0]).get().then((snapshot) => {
            temp.push(
              snapshot.data().name,
            );
            // setFreind(snapshot.data().name)
          });

          chatList.push({ ...item.data(), id: item.id, freind: temp });
        });
        setLoading(false)
        setChats(chatList)
      });


    return () => unsubscribe()
  }, [])

  return (
    <View>
      {loading ? (
        <Text>Loading...</Text>
      ) : (
        <>
          {console.log(typeof chats)}
          {/* 
          above log displays this but either `chats.map` or `FlatList` is not iterating over this 
          []
          0: {timestamp: FirestoreTimestamp, group: false, members: Array(2), recentMessage: {…}, id: '5h4N0KcE6KYLiDA4esNv', …}
          1: {group: false, timestamp: FirestoreTimestamp, members: Array(2), recentMessage: {…}, id: 'RB9EIedrr4vp3JyGSmUa', …}
          2: {timestamp: FirestoreTimestamp, group: false, members: Array(2), recentMessage: {…}, id: 'LapcO2Zc0Qv4Kyx7jeiu', …}
          3: {group: false, timestamp: FirestoreTimestamp, members: Array(2), recentMessage: {…}, id: 'h1i8lTbPmnbZTgG2mwDV', …}
          length: 4
          [[Prototype]]: Array(0)
          */}

          <FlatList data={chats} renderItem={({ item }) => <Text>{item.freind}</Text>} keyExtractor={item => item.id} />
        </>
      )}
    </View>
  )
}

export default Chat;

下面是使用await時chats的日志值

[]
0: {timestamp: FirestoreTimestamp, group: false, members: Array(2), recentMessage: {…}, id: '5h4N0KcE6KYLiDA4esNv', …}
1: {group: false, timestamp: FirestoreTimestamp, members: Array(2), recentMessage: {…}, id: 'RB9EIedrr4vp3JyGSmUa', …}
2: {timestamp: FirestoreTimestamp, group: false, members: Array(2), recentMessage: {…}, id: 'LapcO2Zc0Qv4Kyx7jeiu', …}
3: {group: false, timestamp: FirestoreTimestamp, members: Array(2), recentMessage: {…}, id: 'h1i8lTbPmnbZTgG2mwDV', …}
length: 4
[[Prototype]]: Array(0)

以下是我不使用async/await時的chats記錄值

(4) [{…}, {…}, {…}, {…}]
0: {timestamp: FirestoreTimestamp, group: false, members: Array(2), recentMessage: {…}, id: '5h4N0KcE6KYLiDA4esNv', …}
1: {group: false, timestamp: FirestoreTimestamp, members: Array(2), recentMessage: {…}, id: 'RB9EIedrr4vp3JyGSmUa', …}
2: {timestamp: FirestoreTimestamp, group: false, members: Array(2), recentMessage: {…}, id: 'LapcO2Zc0Qv4Kyx7jeiu', …}
3: {group: false, timestamp: FirestoreTimestamp, members: Array(2), recentMessage: {…}, id: 'h1i8lTbPmnbZTgG2mwDV', …}
length: 4
[[Prototype]]: Array(0)

但在這種情況下， item.freind[0]的值未定義

Answer 1

替代解決方案：

useEffect(() => {
    const chatListQuery = firestore()
      .collection('chatRoom')
      .where('members', 'array-contains', currentUser.uid)
      .where('group', '==', false)
      .orderBy('recentMessage.sendAt', 'desc');
    const unsubscribe =
      chatListQuery.onSnapshot((querySnapShot) => {
        const chatList = []
        const promises = [];
        const freindList = []

        querySnapShot.forEach((doc) => {
          const freindId = doc.data().members.filter((member) => member !== currentUser.uid);
          const promise = firestore().collection('users').doc(freindId[0]).get().then((snapshot) => {
            freindList[doc.id] = snapshot.data().name;
          });
          promises.push(promise);
          chatList.push({ ...doc.data(), id: doc.id, freind: null })
        })

        Promise.all(promises).then(() => {
          setChats(chatList.map(chat => {
            console.log(freindList[chat.id])
            return { ...chat, name: freindList[chat.id] }
          }))
        });
        setLoading(false)
      });

    return () => unsubscribe()
  }, [])```

Answer 2

嘗試使用這個 useEffect 代碼

useEffect(() => {

    const chatListQuery = firestore()
        .collection('chatRoom')
        .where('members', 'array-contains', currentUser.uid)
        .where('group', '==', false)
        .orderBy('recentMessage.sendAt', 'desc');

    const unsubscribe =
        chatListQuery.onSnapshot((querySnapShot) => {

            const queryPromises = querySnapShot.docs.map((item) => {
                return new Promise((resolve,reject) => {

                    const temp = [];
                    const freindId = item.data().members.filter((member) => member !== currentUser.uid);

                    firestore().collection('users').doc(freindId[0]).get().then((snapshot) => {
                        temp.push(snapshot.data().name);
                        resolve({
                            ...item.data(), id: item.id, freind: temp
                        })
                    });
                })
            })

            Promise
                .all(queryPromises)
                .then(chatsData => {
                    setChats(chatsData)
                })
                .finally(() => {
                    setLoading(false)
                })
        });

    return () => unsubscribe()
}, [])