загрузка данных останавливает мою вкладку «Реактивный» до тех пор, пока загрузка не будет завершена

Question

Я получаю данные из облачного firestor методом componentDidMount(), но когда начинается загрузка и во время извлечения данных из облачного firestor, я не могу изменить вкладку, это занимает 8 секунд для менее чем 100 документов документов.Я использую реагирующую навигацию и облачный firestor в приложении-родном приложении. Даже из кеша это занимает 8 секунд, и я не мог изменить вкладки во время извлечения данных из облачного 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()] }));
            }

        }
    });
}

Я хочувыбирая плавно, не останавливая мое приложение, я имею в виду, что я смогу изменить вкладку даже во время извлечения данных из облачного 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 })
}