等到所有回调都调用完毕

Question

我在react原生中有一个组件，可以显示用户的所有聊天记录。主逻辑必须在componentDidMount()中。这里是一个简化的版本：

componentDidMount(){
     ConnectyCube.chat.list({}, function(error, dialogs) {
        chats = dialogs.map(chat => {
            const opponentId = //some logic
            ConnectyCube.users.get(function(error, res){
                //some logic to populate chats 
            });
            }
        )

        this.setState({chats: chats})
        }
    );
}

换句话说，主要的问题是我不知道如何使用多个回调(每个回调对应于用户的每个聊天)来处理数据结构“聊天”，以便在结束时进行setState。也许，我的问题是，我正在以一种同步的方式思考，因为我对事件驱动的方法还不熟悉。任何帮助都是非常感谢的。

Answer 1

这里有一种方法，您可以跟踪剩余请求的数量，并在它们全部完成时触发一些代码。请注意，这几乎就是Promise.all所做的。

//some kind of global or component level variable, tracks the number of pending requests left
var remaining = 0;

componentDidMount(){
     ConnectyCube.chat.list({}, function(error, dialogs) {
        // set remaining to how many dialogs there are
        remaining = dialogs.length;
        chats = dialogs.map(chat => {
            const opponentId = //some logic
            ConnectyCube.users.get(function(error, res){
                //some logic to populate chats

                // decrement remaining and check if we're done
                if (--remaining === 0) {
                  finalCallback(); // in here you do your setState.
                }
            });
            }
        )

        this.setState({chats: chats})
        }
    );
}