Flatlist 不顯示從數據庫中檢索到的信息

Question

我正在嘗試顯示用戶已加入平面列表的論壇列表，該列表首先通過我的 useLayoutEffect 中的 onSnapshot function 從 firestore 檢索，如下所示：

useLayoutEffect(() => {
    const unsubscribe = onSnapshot(userRef, (snapshot) => {
      const joinedForums = [];
      if (snapshot.data().myForums.length > 0) {
        snapshot.get("myForums").forEach((forumDoc) => {
          let docRef = doc(db, "forums", forumDoc);

          getDoc(docRef).then((docInf) => {
            joinedForums.push({
              ...docInf.data(),
              id: docInf.id,
            });
          });
        });
      }

      setJoinedForums(joinedForums);
    });

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

每當我加載屏幕時，平面列表都是空的。

這是我的平面列表的代碼：

<FlatList
        data={joinedForums}
        renderItem={({ item }) => (
          <TouchableOpacity
            onPress={() => {
              navigation.navigate("ForumDetails", {
                forumId: item.id,
              });
            }}
          >
            <Card>
              <View>
                <Text>{item.id}</Text>
                <Text>Title: {item.title}</Text>
                <Text>Desc: {item.desc}</Text>
                <Text>Created By: {item.createdBy}</Text>
              </View>
              {/* Maybe add a recent message component onSnapshot for each forum */}
              <TouchableOpacity
                onPress={() => {
                  leaveForum(item.id);
                }}
              >
                <Text>Leave</Text>
              </TouchableOpacity>
            </Card>
          </TouchableOpacity>
        )}
      />

這是屏幕截圖：

在初步研究了這個問題之后，我發現更新 state 會導致平面列表重新呈現，所以我嘗試通過一個按鈕手動觸發對單獨的虛擬 state 的更新，然后在平面列表中顯示項目正確。

這是手動更新 state 時的屏幕截圖：

我不確定在哪里調整我的代碼以使平面列表在第一次加載時呈現項目，而不必手動觸發 state 更改。

Answer 1

在渲染從快照中檢索到的新數據后，您應該在onSnapshot中更新 state。