Question

我正在开发一个应用程序，用户可以在其中创建食谱并在一个组中共享食谱。当用户转到组页面时，我希望它具有可搜索的组列表。我正在使用搜索栏和列表进行此操作。

    React.useEffect(() => {
    var userGroupIds = userContextData.user.groups
        ? Object.keys(userContextData.user.groups)
        : null;
    var groupObjects = [];
    if (userGroupIds) {
        userGroupIds.forEach((groupId) => {
            db.ref(`groups`)
                .child(groupId)
                .on("value", function (snapshot) {
                    let group = snapshot.val();
                    return groupObjects.push(group);
                });
            setGroupListState(groupObjects);
        });
    }
}, []);

这是我用来收集数据的功能，但是它始终加载时不包含任何数据，然后当我向后导航时，它列出了所有数据。

    <FlatList
            ListEmptyComponent={EmptyGroups}
            style={{ marginBottom: 80 }}
            data={searchText.length > 0 ? groupList : groupListState}
            keyExtractor={(group, index) => (index + 1).toString()}
            renderItem={(group, index) => (
                <GroupMenuListItem
                    key={(index + 100).toString()}
                    name={group.item.name}
                    recipes={group.item.recipes}
                    createdAt={group.item.createdAt}
                    navigation={props.navigation}
                />
            )}
        />

这是列表。

如何确保函数在列表呈现之前运行？

在加载之前从firebaseRTD获取数据并设置变量

0 个答案: