获取数据会一直停止我的react-native选项卡，直到获取完成为止

Question

我正在使用componentDidMount()方法从云冒险中检索数据，但是当提取开始时以及从云冒险中获取数据期间我无法更改选项卡时，少于100个项目文档需要8秒。我在react-native app中使用react-navigation和cloud firestor。即使从缓存中也需要8秒钟，我无法在从云冒险中获取数据时更改选项卡，但在获取后我可以更改选项卡。

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()] }));
            }

        }
    });
}

我想在不停止我的应用程序的情况下顺利获取，我的意思是即使在从云端防火墙获取数据时也应该能够更改选项卡。

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 })
}