使用Deno Fresh框架时输入框打字无法实时更新状态的问题排查

你的问题核心是当前组件是Fresh默认的服务器组件，这类组件仅在服务器端渲染，不会在浏览器中执行交互逻辑，因此输入时的onChange无法实时触发状态更新，只有组件重新从服务器获取渲染结果时才会看到状态变化。

解决方法很简单，把组件标记为客户端组件即可：

1. 在组件文件顶部添加export const client = true;，明确告知Fresh这是需要在客户端运行的组件
2. 确保正确导入Preact的相关依赖（如果还没导入的话）

修改后的完整代码：

import { h, useState, useEffect } from "preact";
import type { JSX } from "preact";

// 标记为客户端组件
export const client = true;

type CalculousProps = {};

export default function Calculous(props: CalculousProps) {
  const [input, setInput] = useState<string>('');

  const onSubmit = (event: JSX.TargetedEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log(input);
  }

  useEffect(() => {
    console.log(input);
  }, [input])

  return (
      <form onSubmit={onSubmit}>
        <input type="text" value={input} onChange={(e) => setInput(e.target.value)} />
        <button disabled={isNaN(Number(input))} type="submit">Next</button>
      </form>
  );
}

当组件被标记为客户端组件后，Fresh会将组件代码发送到浏览器，此时useState状态更新和onChange事件逻辑都会在客户端实时执行，输入文本时组件会立即重新渲染，状态也会同步更新。

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