Preact组件渲染时按钮自动触发24次点击并无响应，求问题定位

你的代码核心问题出在Counter.tsx的按钮点击事件绑定上：

<button onClick={setCount(count + 1)}>click</button>

这里你直接调用了setCount(count + 1)，而不是传递一个函数给onClick。组件首次渲染时就会执行这个函数，导致count状态更新，触发组件重新渲染；重新渲染时又会再次执行setCount，形成无限渲染循环——这就是为什么页面一开始就显示24，还会拖慢浏览器的原因。

修复代码 #

把onClick的赋值改成箭头函数，让它只有在按钮被点击时才执行：

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

或者也可以使用函数式更新（适合依赖前一次状态的场景）：

<button onClick={() => setCount(prevCount => prevCount + 1)}>click</button>

这样修改后，只有点击按钮时才会触发状态更新，不会出现无限循环，浏览器也不会被拖慢了。

内容的提问来源于stack exchange，提问作者Ooker