获取数据保持停止我的反应本标签，直到获取完成为止

Question

我正在从 componentDidMount()方法中检索云火estor的数据，但是当获取启动和从云firestor获取数据时，我无法更改选项卡文档。我正在反应本地应用中使用React-Navigation和Cloud Firestor。即使从缓存中也需要8秒钟，在从Cloud Firestor获取数据时也无法更改选项卡，但是在获取后，我可以更改选项卡。

getMessages(){
    db.collection("users/" + this.state.username + "/msgs").orderBy("date", "asc").get().then(snapshot=>{
        this.docs = snapshot.docs;
        for (let i = this.docs.length - 1; i >= 0; i--) {
            this.prtcpnts = this.state.currentuser === this.docs[i].data().user.username ? this.state.currentuser + this.docs[i].data().otheruser : this.state.currentuser + this.docs[i].data().user.username;
            if (this.state[this.prtcpnts] === undefined){
                this.setState({
                    [this.prtcpnts]: [this.docs[i].data()]
                });
            }else{
                this.setState(preState => ({ [this.prtcpnts]: [...preState[this.prtcpnts], this.docs[i].data()] }));
            }
        }
    });
}

我想在不停止应用程序的情况下拿起smo脚，我的意思是，即使在从云Firestor获取数据时也应该更改选项卡。

Answer 1

我通过重构为以下代码解决了我的问题。

if (this.outState[this.prtcpnts] === undefined){
    this.outState[this.prtcpnts] = [this.docs[i].data()];
}else{
    this.outState[this.prtcpnts] = [...this.outState[this.prtcpnts], this.docs[i].data()]
}
if (i === 0) {
   this.setState({ ...this.state, ...this.outState })
}