我试图显示一个用户加入的论坛列表，这个列表首先是通过useLayoutEffect中的onSnapshot函数从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>
        )}
      />

以下是屏幕截图：

在对这个问题进行初步研究之后，我发现更新状态会导致平面列表重新呈现，所以我尝试通过一个按钮手动触发对一个单独的虚拟状态的更新，然后平面列表会正确显示项目。
以下是手动更新状态时的屏幕截图：

我不确定在哪里调整代码，以便在第一次加载时获得平面列表来呈现项，而不必手动触发状态更改。