0

Estou iniciando com React Native, porém estou com dificuldades para obter uma lista ao carregar a tela utilizando useEffect, sempre que inicializa a tela a primeira vez, o setList retorna vazio, e quando clico no botão para atualizar, retorna os dados normalmente.

Alguém pode me explicar por que isso acontece? Olhei a documentação do useEffect e realmente a primeira vez que é chamado, retorna nulo, mas não entendi o porque na minha chamada o mesmo não retorna os dados da API. Ressaltando que quando clico no botão "refresh", os dados retornam normalmente.

const [list, setList] = useState([]);

const handleTotals = async () => {

        setLoading(true);
        setList([]);
        
        let res = await Api.getOrderTotals();

        if(res.data) {

            setList(res.data);

        }

        setLoading(false);

    }
useEffect(() => {
        
        setName();
        handleTotals();        
        console.log(list);        //Retorna nulo

    }, [])
3
  • handleTotals é uma funcão assíncrona, você tem que esperar ela ser concluida para dar um console.log Commented 21/03/2021 às 18:06
  • @CmteCardeal, como posso utilizar o await dentro do useEffect? Já tentei aqui e nada por enquanto. Agradeço a resposta! Commented 21/03/2021 às 18:07
  • @CmteCardeal sim, continua nulo! :( Commented 21/03/2021 às 18:15

2 Respostas 2

1

Da forma como você esta utilizando o useEffect ele irá executar somente durante a primeira renderização do seu componente, como seu list depende de uma chamada assíncrona ele vai possuir o valor inicial que você atribuiu. se você quiser ver os valores no seu console.log recomendo que você coloque fora do seu useEffect, por exemplo:

useEffect(() => {
        setName();
        handleTotals();        
    }, [])

console.log(list);

Dessa forma assim que sua chamada for finalizada e o setList for chamado seu componente irá renderizar com o estado atualizado, é importante você entender que o useEffect não irá ser executado durante essa segunda renderização.

3
-2
async function loadTotals(){
   setName();
   // deve aguardar finalizar a requisição, tambem é possível utilizando o `.then`
   await handleTotals();        
   console.log(list);
}

useEffect(() => {
   loadTotals()    
}, [loadTotals])
1
  • Por favor evitem longas discussões nos comentários; a conversa de vocês foi movida para o chat
    – Syzoth
    Commented 21/03/2021 às 23:34

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 .