javascript - 如何从 ref 获取 ref key 然后按该键搜索并从该 ref 获取数据

Question

我想读取帖子的数据并获取用户 key ，然后通过它进行搜索并同时获取用户数据，我尝试过，但它后退了一步，直到它才显示用户名我执行任何其他操作

这是帖子和经过身份验证的用户的 Firebase 实时数据库

这是我尝试过的代码

userFullName = ''
    listenForCommunityAndPosts = () =>  {
        try {

            firebase.database().ref('posts').orderByChild('communityKey')
            .equalTo('-M07uNj9HbQxc_ich644'/*this.props.navigation.getParam("communityKey")*/)
            //.startAt('-M07uNj9HbQxc_ich644'/this.props.navigation.getParam("communityKey")/)
            .on('value', (dataSnapshot) =>{
                var postsList = [];
                dataSnapshot.forEach((child) => {
                    var userId = child.val().user
                    /**************/
                    firebase.database().ref('authenticatedUsers').child(userId).on('value', snap => {this.userFullName =  snap.val().fullName})
                    /**************/
                    postsList.push({
                        image: child.val().image,
                        text: child.val().text,
                        //user: child.val().user,
                        user: this.userFullName,
                        likesNumber: child.val().likesNumber,
                        commentsNumber: child.val().commentsNumber,
                        postKey: child.key
                    })
                })
                this.setState({ posts: postsList })
            })
        }
        catch(e){
            alert(e.message)
        }

    }

Answer 1

现在，您可以在加载 posts 时调用 setState，即加载每个用户的用户名之前。因此您的应用将显示没有用户名的用户。

为了确保它显示带有用户名的帖子，您需要在所有用户名加载后调用 setState。看起来像这样:

firebase.database().ref('posts').orderByChild('communityKey')
.equalTo('-M07uNj9HbQxc_ich644')
.on('value', (dataSnapshot) =>{
    let promises = [];
    dataSnapshot.forEach((child) => {
        var userId = child.val().user
        let userRef = firebase.database().ref('authenticatedUsers').child(userId);
        promises.push(userRef.child('fullName').once('value'));
    })

    Promise.all(promises).then((snapshots) => {
        return snapshots.map((userNameSnapshot) => userNameSnapshot.val());
    }).then((userNames) => {
        let postsList = [];
        let index = 0;
        dataSnapshot.forEach((child) => {
            postsList.push({
                image: child.val().image,
                text: child.val().text,
                user: userNames[index],
                likesNumber: child.val().likesNumber,
                commentsNumber: child.val().commentsNumber,
                postKey: child.key
            })
            index = index + 1;
        });

        this.setState({ posts: postsList })
    });

我改变了什么:

• 用户现在加载的是 once() 监听器，而不是 on()。这可以确保您不会在用户名发生更改等情况下添加帖子的另一个副本。请注意，您可以处理此类情况，但在这种情况下，您需要更新 postsList 中的现有条目，而不是添加新副本。
• 监听器现在仅加载用户名，因为这就是您所使用的全部内容。这将减少带宽使用。
• 它将所有加载操作放入一个 promises 数组中，然后使用 Promise.all 来“等待”所有操作完成。
• 将所有用户名放入 userNames 数组中，顺序与 dataSnapshot 中的顺序相同。
• 根据 dataSnapshot 和 userNames 数组构建 postsList。
• 将结果列表放入状态中，以便 React 渲染它。

<小时/>

值得考虑是否要多次调用setState。

例如:帖子加载后一次，然后每个名称返回时一次。这样，您最初会看到没有用户名的帖子，然后看到加载时显示的每个用户名。

或者，您只能在发布用户名后添加每个帖子。因此，在这种情况下，您不会在加载帖子后调用 setState，而只能在加载每个帖子的用户名后调用。

这两者都是有效的替代方案，您可以通过上述代码的变体来实现。