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。