提取数据会一直停止我的本机选项卡,直到获取完成

时间:2019-03-01 19:12:07

标签: firebase react-native google-cloud-firestore react-navigation

我正在以componentDidMount()方法从cloud firestor检索数据,但是当开始获取数据时以及在从cloud firestor提取数据的过程中,我无法更改标签,少于100个项目的文档需要8秒。 我在react-native应用程序中使用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()] }));
            }

        }
    });
}

我想在不停止应用程序的情况下轻松获取信息,我的意思是即使在从cloud firestor提取数据的过程中,我也应该能够更改标签。

1 个答案:

答案 0 :(得分:0)

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

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