-2

estou com um caso que deve ser bem comum para vocês.

Faço uma consulta de uma lista de venda em uma API Rest e nesse momento seto o estado isLoading para true, de forma que um componente de Spinner que tenho fique visível e no final da consulta seto para false para que o mesmo desapareça

const [isLoading, setIsLoading] = useState(false)
        
useEffect(() => {
    setIsLoading(true)
    fetchSales()
    setIsLoading(false)
}, [dayInitial, dayFinal])

Bem, aqui começa o problema... Pois apesar de eu ter setado o valor de isLoading para true, o mesmo continua false e a consulta é realizada sem exibir o Spinner. Em minhas pesquisas na internet descobri que esse comportamento é normal, uns dizem que o useState não faz essa atribuição de maneira síncrona e por isso esse problema ocorre, outros alegam que o problema ocorre porque o valor não muda dentro da closure(https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately). Aqui vem a minha primeira indagação, pois estou iniciando meu estudos em React Native. Como então vocês fazem nesse caso para habilitar/desabilitar o Spinner?

Continuando... Antes desse projeto, eu fiz um similar, onde buscava uma lista de clientes, mas nesse projeto usei o Context API para gerenciamento dos estados, com os hooks useContext e useReducer, e a chamada do método de busca era assim:

useEffect(() => {
dispatch({
    type: 'setIsLoading',
    payload: true
})
    
loadClients()

dispatch({
    type: 'setIsLoading',
    payload: false
})

}, [props.route.params?.addValue])

Fiz basicamente a mesma coisa, sendo que dessa vez setei o isLoading usando o dispatch do useReducer. Nesse caso não tive problemas com assíncronismo na atribuição dos valores do estado, consegui atribuir o isLoading para true, fazer a busca e por fim atribuir para false. Porque nesse caso funcionou?

1
  • Não entendi porque fui pontuado negativamente nessa questão. Expus a minha pesquisa, argumentei de forma clara a questão e dado a minha pesquisa confirmo que a mesma é bem útil Commented 10/06/2021 às 21:17

2 Respostas 2

1

O problema é simples de resolver, me parece que foi complicado desnecessariamente. Veja o código:

const [isLoading, setIsLoading] = useState(false)
        
useEffect(() => {
    setIsLoading(true)
    fetchSales()
    setIsLoading(false)
}, [dayInitial, dayFinal])

Dentro do useEffect, você colocou o isLoading como true, chamou a função fetchSales e já colocou isLoading como false, sem aguardar o fetch ser executado. Com isso, o React sequer atualizou o estado do isLoading para true, porque ele faz a atualização em lotes.

Para resolver, basta usar uma função assíncrona:

const [isLoading, setIsLoading] = useState(false)
        
useEffect(() => {
    async function fetchData() {
        setIsLoading(true)
        await fetchSales()
        setIsLoading(false)
    }

    fetchData();
}, [dayInitial, dayFinal])

Dessa maneira, o estado atualizará, aguardaremos o fetch ser executado e então atualizamos o estado novamente.

Sobre o seu console.log não funcionar, você já viu que o useState possui um comportamento assíncrono e não entendeu. Nessa pergunta isso está bem respondido. Em resumo, o que acontece é que o valor é atualizado apenas no próximo render.

0

Depois de bater a cabeça o dia todo, consegui resolver colocando um async/await dentro do método fetchSales, e inseri o setIsLoading antes e depois:

const fetchSales = async () => {
        const dateInitial = moment(dayInitial, 'ddd, D MMM YYYY').format('YYYY-MM-DD')
        const dateFinal = moment(dayFinal, 'ddd, D MMM YYYY').format('YYYY-MM-DD')

        try {
            setIsLoading(true)

            console.log(isLoading) //continua dando false, mas o spinner apareceu
                await fetch(server, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ dateInitial, dateFinal })
                })
                    .then(res => res.json())
                    .then(res => {
                        setData(res)
                        setDataMain(res)
                    })
                setIsLoading(false)
            } catch (e) {
                showError(e)
            }
        }

Depois no useEffect chamo apenas o método em questão:

useEffect(() => {
        fetchSales()
    }, [dayInitial, dayFinal])

O grande mistério é que no console.log o isLoading continua a dar false, mesmo com o Spinner aparecendo!!!

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 .