0

é o seguinte estou com um dificuldade de encontrar onde está o erro desse código, eu quero fazer um contador, porém toda vez está dizendo que o setCounter não e uma função.

import React, {useState}from 'react';
//componente: e um bloco isolado de HTML, CSS e JS, o qual não interfere no resto da aplicação
// propriedade: informaçoes que um componete PAI passa para um componente filho.
// Estado:



//pro exemplo o app e um componente 
function App() {
  //bom aqui foi criado uma variavel counter que vai pegar o useState que vai comecar com o valor 0.
  const {counter, setCounter} = useState(0);
  function incrementCounter(){
      setCounter(counter + 1);
      }
  return(
    <>
      <h1>Contador: {counter}</h1>
      <button onClick={incrementCounter}>incrementar</button>
    </>
  )

}

export default App;

help me please!

1
  • Se esta resposta resolveu o seu problema e não restou nenhuma dúvida, marque-a como correta/aceita ao clicar no "✅" que está ao lado dela, o que também marca a sua pergunta como resolvida. Se ainda te resta alguma dúvida ou gostaria de maiores esclarecimentos, fique a vontade para comentar. 😊 Commented 15/03/2020 às 23:59

1 Resposta 1

2

Você está usando o desestruturador errado. Chaves {} servem para desestruturar um objeto, colchetes [] server para desestruturar um array.

O retorno da função useState é uma array com dois itens, o primeiro item representa o seu estado, e o segundo é o método para mutar o seu estado. Logo, para armazenar esses dois itens em variáveis, você deveria estar utilizando const [counter, setCounter] = useState(0).


Outro detalhe para o código: a função setCounter não irá mutar o seu estado imediatamente após ser invocada, não há garantia de que o valor de counter ainda será o mesmo que era quando você invocou setCounter, o que pode gerar uma inconsistência. Quando você precisa mutar o seu estado com base num valor anterior, você deve utilizar callbacks, ao invés de

setCounter(counter + 1)

Utilize

setCounter(counter => counter + 1)
1
  • Cara, muito obrigado mesmo. Commented 15/03/2020 às 23:43

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 .