为什么组件开始渲染时按钮自动点击了 24 次并且没有响应？

Question

在

routes/index.tsx

我有：

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

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

在

islands/Counter.tsx

我有：

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>
  );
}

第一个渲染显示数字 24，并且 Firefox 说“此页面正在减慢 Firefox 的速度”。我哪一部分做错了？

Answer 1

onClick

应该被赋予一个函数，但你直接调用

setCount

。

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>
  );
}