Preact Signals Todo列表渲染异常及输入问题求助

针对你遇到的两个问题，直接给出解决方法和原因：

问题1：输入框只能输入单个字符 #

解决方法 #

把 input 的 value={newTodo.value} 改成 value={newTodo}。

原因 #

Preact 的信号在 JSX 中直接使用信号变量（如 {newTodo}）时，会自动订阅信号的变化，组件会在信号更新时重新渲染。而如果写 {newTodo.value}，只是读取一次当前值，不会建立订阅关系——当你更新 newTodo.value 时，组件不会重新渲染，输入框的 value 不会同步更新，所以每次输入后，输入框还停留在之前的状态，看起来只能输入单个字符。

问题2：添加 todo 后 UI 不更新 #

解决方法 #

修改添加 todo 的逻辑，不要直接用 push 修改原数组，而是创建新数组赋值给信号：

const addTodo = () => {
  // 替换原数组为新数组，而不是修改原数组
  todos.value = [...todos.value, newTodo.value];
  newTodo.value = '';
};

原因 #

Preact 信号是基于值变化触发更新的，数组属于引用类型。直接用 push 修改原数组时，数组的引用没有改变，信号无法检测到值的变化，因此不会触发 UI 重新渲染。创建新数组并赋值，会改变信号的引用值，信号会感知到变化并更新 UI。

内容的提问来源于stack exchange，提问作者D. Wei