5

A aplicação: ao clicar em algum botão, um evento onClick é disparado e um fetch à uma API que retorna dados em JSON é realizada. Logo após esses dados serem transformados em um objeto, a aplicação seleciona apenas os valores relevantes a serem mostrados em tela e faz um console.log deste objeto.

O problema: Como pode ser notado neste GIF, o primeiro clique retorna um objeto vazio no console do browser. Já os cliques posteriores retornam um objeto contendo os valores do clique anterior.

Por fim, segue o código:

const App = () => {
  const [dados, setDados] = React.useState({});

    async function handleClick(event) {
      const innerText = event.target.innerText;
      const API = `https://ranekapi.origamid.dev/json/api/produto/${innerText}`;
      const fetchProduct = await (await fetch(API)).json();
      const productInfo = {
        name: fetchProduct.nome,
        price: +fetchProduct.preco,
        img: fetchProduct.fotos[0].src,
    }

    setDados(dados => productInfo);
    console.log(dados);
  }

  return (
    <div>
      <button onClick={handleClick} style={{ marginRight: "1rem" }}>
        notebook
      </button>
      <button onClick={handleClick} style={{ marginRight: "1rem" }}>
        smartphone
      </button>
      <button onClick={handleClick}>tablet</button>
      <div>
        <h1>{dados.name}</h1>
        <p>{dados.price}</p>
        <img src={dados.img} alt={dados.name}/>
      </div>
    </div>
  );
};
5
  • @RafaelTavares então, acontece que eu preciso usar o método toLocaleString para formatar o preço do produto para BRL. Mas como o objeto, no primeiro click, está vazio, o React retorna um erro informando que o valor price dentro do productoInfo é undefined e, portanto, não consegue executar o toLocaleString. Resumindo, eu preciso que o setDados seja atualizado ANTES das informações aparecerem na tela. Mas não estou conseguindo achar a lógica correta. Commented 2/12/2020 às 16:30
  • Para debugar, acho que seria melhor dar: console.log(productInfo);
    – Marcos ACR
    Commented 2/12/2020 às 16:30
  • @RicardoPassos você precisa atualizar o valor para que o dados esteja formatado? Pode formatar o productInfo antes de colocar no setDados... Commented 2/12/2020 às 16:32
  • 1
    @RafaelTavares seus comentários + a resposta conseguiram me dar uma luz. Consegui resolver o problema. Muito obrigado <3. Commented 2/12/2020 às 16:36
  • Tente utilizar desta forma: ``` setDados(dados => {...dados, ...productInfo}); ``` Commented 9/12/2020 às 19:02

1 Resposta 1

6

O setState é assíncrono

Esse é o comportamento esperado.

Chamadas ao setState são assíncronas, o React busca realizar uma atualização em lote (batch) para causar menos renderizações.

Tendo em vista esse comportamento do setState, você conseguirá realizar um console.log do estado atualizado apenas na próxima renderização, e não logo abaixo do setState.

Citando a documentação:

Por que setState está me dando o valor errado?

Chamadas para setState são assíncronas - não confie que this.state vá refletir o novo valor imediatamente após chamar setState. (...)

Quando setState é assíncrono?

Atualmente, setState é assíncrono dentro de manipuladores de evento.

Isso garante que, por exemplo, caso tanto Parent quanto Child chamem setState após um evento de clique, Child não seja renderizado duas vezes. Em vez disso, React executa todas as atualizações de estado ao final do evento do navegador. Isso resulta numa melhoria de performance significativa para aplicativos maiores.

Isso é um detalhe de implementação, então evite depender disso diretamente. Em versões futuras, o React fará atualizações em lotes em mais casos.

Um exemplo prático:

function Exemplo() {
  const [state, setState] = React.useState('primeiro render');

  React.useEffect(() => {
    setState('segundo render');
    console.log('useEffect após setState:', state);
  }, []);

  console.log('RENDER:', state);

  return <div>Estado: {state}</div>
}

ReactDOM.render(<Exemplo />, document.querySelector("#container"));
<div id="container"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>


A diferença entre um objeto e uma função no setState

Um detalhe específico sobre seu caso setDados(dados => productInfo): existe diferença entre utilizar um objeto e uma função no setState. Como seu novo estado independe do estado atual, você pode simplesmente utilizar setDados(productInfo).

Conforme documentação:

Passar uma função de atualização permite que você acesse o valor atual do state dentro dela. Como as chamadas de setState são feitas em lotes, isso permite que você encadeie atualizações e garanta que elas se componham ao invés de entrar em conflito.

Abaixo coloco um exemplo com setTimeout de 500ms para simular uma situação em que esse conflito acontece. Clique várias vezes rapidamente no mesmo botão para atualizar o estado então ver a diferença entre os dois modos:

function Exemplo() {
  const [stateUm, setStateUm] = React.useState(0);
  const [stateDois, setStateDois] = React.useState(0);

  function updateUm() {
    setTimeout(() => setStateUm(stateUm + 1), 500);
  }
  
  function updateDois() {
    setTimeout(() => setStateDois(val => val + 1), 500);
  }

  return (
    <div>
      <div>
        <p>stateUm: {stateUm}</p>
        <button onClick={updateUm}>setStateUm(stateUm + 1)</button>
      </div>
      <div>
        <p>stateDois: {stateDois}</p>
        <button onClick={updateDois}>setStateDois(val => val + 1)</button>
      </div>
    </div>
  );
}

ReactDOM.render(<Exemplo />, document.querySelector("#container"));
<div id="container"></div>
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

1
  • 1
    Aparentemente o problema estava no setDados. Fiz o que você informou ali no último parágrafo e tudo deu certo. Commented 2/12/2020 às 16:38

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 .