0

Preciso fazer uma chamada a API com React e pra isso estou usando o Axios.

Fazendo um teste com o código abaixo, no console eu consigo ver o resultado:

const [bill, setBill] = useState([]);

useEffect(() => {
  api.post('/bills', { userId })
    .then(response => console.log(response.data))
    .catch(e => console.log(e));

console.log('bill', bill);
}, []);

inserir a descrição da imagem aqui

Porém, quando tento alimentar o estado com o código abaixo, o console.log do estado não altera, continua vazio.

const [bill, setBill] = useState([]);

useEffect(() => {
  api.post('/bills', { userId })
    .then(response => {
      setBill(response.data);
    })
    .catch(e => console.log(e));

  console.log('bill', bill);
}, []);

inserir a descrição da imagem aqui

1 Resposta 1

2

O estado está sendo provavelmente alterado sim. O problema é que você está executando o console.log antes dele ser alterado.

O processo de alteração de estado no React é assíncrono. Além disso, como você está trabalhando com uma chamada assíncrona (api.post), existe outra razão para esse estado estar sendo alterado de modo assíncrono.

Veja o código:

api.post('/bills', { userId })
  .then(response => {
    setBill(response.data)
  })
  .catch(e => console.log(e));

console.log('bill', bill);

Ele é executado da seguinte forma:

  1. Primeiro você executa a função api.post, que é assíncrona — está retornando uma Promise.

  2. Você executa o console.log, e bill ainda é um array vazio já que o estado não foi alterado.

  3. A Promise é concluída, o que permite sucesso ou falha:

    • No caso de falha da Promise, o callback do catch é executado.
    • No caso da resolução sucedida da Promise, o callback do then é executado, o que define o estado.

Note que o estado está sendo definido após o console.log.

Para saber mais, procure entender o funcionamento das Promises. Um bom artigo para começar: "Promessas em JavaScript: uma introdução".

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 .