0

Tenho o seguinte código:

requireUsers = () => {
    this.users = database.ref('users')
    this.users.on('value', snapshot => {
        this.state.users = snapshot.val()
        Object.keys(snapshot.val()).map((value,key) => emails[key] = snapshot.val()[value].email)  
    })       
}

requireSeries = () => {
    Object.keys(emails).map((value,key) => emails[value] === email ? userId = Object.keys(this.state.users)[key] : "")
    this.series = database.ref(`users/${userId}/series/${this.props.match.params.genre}`)
    this.series.on('value', snapshot => {
        this.setState({
            series: snapshot.val()
        })
    })
}

componentDidMount = () => {
    auth.onAuthStateChanged(user => {
        if (user){
            email = user.email   
            this.setState({
                isLoggedIn: true,
                isLoading: false
            })              
            this.requireUsers()
            window.setTimeout(this.requireSeries, 2000)  
        }
    })         
}

Sei que essa função window.setTimeout(this.requireSeries, 2000) vai dar pau alguma hora, quando o número de registro de usuários for grande, mas é a unica maneira que encontrei para carregar os dados no this.state.users. Tentei usar async e await mas não funcionou. Alguém sabe como usaria async / await aí?

1 Resposta 1

2

Como você tentou usar async e await? await é uma palavra reservada que serve para esperar uma Promise ser resolvida, se você não criar promises, não tem como usar await.

async por outro lado serve como um modificador de função. Ele faz com que todos os retornos de uma função se transforme em um Promise.resove, e todos os erros em um Promise.reject, ou seja, é açúcar sintático.

Porém se você tem muitas funções aninhadas é mais fácil trabalhar com a sintaxe clássica, especialmente se você quiser retornar um resultado.

A jugar pelo seu código, acredito que sintaxe seria assim:

requireUsers = () => new Promise((resolve , reject) => {
    this.users = database.ref('users');
    this.users.on('value', snapshot => {
        this.state.users = snapshot.val();
        Object.keys(snapshot.val()).map((value,key) => emails[key] = snapshot.val()[value].email);
        resolve(/*você pode retornar um valor aqui*/);
    });
});     

Com async e await ficaria dessa forma:

componentDidMount = async () => {
    auth.onAuthStateChanged(async user => {
        if (user) {
            email = user.email; 
            this.setState({
                isLoggedIn: true,
                isLoading: false
            });              
            await this.requireUsers();
            this.requireSeries();
        }
    });
}

Agora se por alguma razão async e await não funcionar, porque seu framework está rodando funções síncronas por trás dos callbacks, você terá que usar os métodos then e catch, que são infalíveis:

componentDidMount = () => {
    auth.onAuthStateChanged(user => {
        if (user) {
            email = user.email; 
            this.setState({
                isLoggedIn: true,
                isLoading: false
            });
            /*v é o valor que você retornou, é irrelevante nesse exemplo*/
            this.requireUsers().then(v => this.requireSeries());
        }
    });
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .