-1

tenho uma função que busca informações de um usuário em uma API e armazena em um useState, gostaria de saber pq se coloco um console.log pra ver se armazenou os dados corretamente no useState me retorna vazio porém na tela me mostra os valores só a partir da segunda requisição é mostrado as informações no console, vou postar o código aqui:



export default function Teste() {

  const [repositories, setRepositories] = useState({});
  const [nome, setNome] = useState()

  const handleChange = (event) => {
    const auxValues = { ...nome }
    auxValues[event.target.name] = event.target.value
    setNome(auxValues)
  }

  function buscarUser(cpf){
    fetch(`http://localhost:8080/rest/v1/user/${cpf}`)
      .then(res => res.json())
      .then(data => setRepositories(data));
  }

  function handleUser(){
    buscarUser(nome.usuario)
    console.log(repositories)
  }

  return(
    <>
      <input name="usuario" onChange={handleChange}></input>
      <button onClick={ handleUser }>Buscar User</button>
      <label> {repositories.nome} </label>
    </>
  ) 
} ``` 

1 Resposta 1

0

Recomendo dar uma olhada em promises e também um pouco a respeito sobre programação assíncrona no Javascript, explicando de maneira geral, o que está acontecendo ai é que na sua função handleUser, você está executando a buscarUser no qual é uma promise e a mesma não está sendo esperada o termino da sua execução para realizar o console.log, uma maneira simples de resolver isso seria simplesmente colocar:

function handleUser(){
    buscarUser(nome.usuario)
     .then(() => console.log(repositories))
 }

Dessa maneira o console.log somente será executado quando a requisição terminar e for bem sucedida. Espero te ajudado ! Abraços !

2
  • Alterei a função conforme sua sugestão, porém no log continua aparecendo o objeto vazio mas código html aparece os dados de boa, enfim já coloquei as functions como async mesmo assim sem sucesso. Enfim como esta renderizando de boa no html não esta "por enquanto " interferindo no sistema, mas só queria entender do pq isso acontece. Mas obrigado pela sugestão e ajuda.
    – MarceloCP
    30/03/2020 às 19:09
  • uma das possíveis respostas, seria que antes do React chamar a funçāo setState, está fazendo o console.log no qual está printando um objeto vazio que é o estado inicial. Você poderia mudar esse console.log para a funçāo buscarUser, logo após finalizar a requisiçāo. Depois da uma lida no Ciclo de eventos do React: reactjs.org/docs/react-component.html 31/03/2020 às 15:49

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 .