Início / coding / Perguntas / 78287293
Accepted
Ooker
Asked: 2024-04-07 17:23:30 +0800 CST

Por que o botão é clicado automaticamente 24 vezes e não responde quando o componente começa a renderizar?

  • 772

Em routes/index.tsxeu tenho:

import Main from "../islands/Counter.tsx";

export default function Home() {
  return (<Main />);
}

Em islands/Counter.tsxeu tenho:

import { useState } from "preact/hooks";

export default function Main() {
  const [count, setCount] = useState<number>(0);
  return (
    <main>
      <button onClick={setCount(count + 1)}>click</button>
      {count}
    </main>
  );
}

A primeira renderização mostra o número 24 e o Firefox diz "Esta página está deixando o Firefox lento". Qual parte estou fazendo errado?

reactjs

1 respostas

  1. Best Answer

    Você está chamando setCount, não passando uma função que a aciona para o seu onClickmanipulador (como deveria ser).

    import { useState } from "preact/hooks";

export default function Main() {
  const [count, setCount] = useState<number>(0);
  return (
    <main>
-      <button onClick={setCount(count + 1)}>click</button>
+      <button onClick={() => setCount(count + 1)}>click</button>
      {count}
    </main>
  );
}
    • 1

relate perguntas