React中Preact Signals数组更新后不重新渲染的问题解决

问题分析 #

你的代码存在三个核心问题导致UI不更新：

1. 直接通过count.value访问信号值，组件无法自动订阅信号的变化，因此数组更新后不会触发重渲染
2. 使用全局变量varA作为列表项的key，会导致key不稳定且重复，破坏React的Diff算法
3. 按钮上直接渲染信号对象{count}，无法正确显示数组状态

修复方案及代码 #

修改后的完整代码如下：

import React from "react";
import { signal } from "@preact/signals-react";

const count = signal([0]);

const App = () => {
  return (
    <div>
      <ul>
        {/* 直接使用信号变量count，自动解包并订阅变化 */}
        {count.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>

      {/* 更新数组时创建新数组，按钮显示当前数组长度 */}
      <button onClick={() => count.value = [...count.value, count.value.length]}>
        添加元素（当前共{count.value.length}个）
      </button>
    </div>
  )
};

export default App

关键修改点说明 #

• 信号访问方式：在JSX中直接使用count而非count.value，@preact/signals-react会自动处理信号的解包和订阅，当信号值变化时自动触发组件重渲染
• 列表key优化：用数组项item作为key（如果后续会有重复值，可改用index或自定义唯一标识），避免全局变量导致的key异常
• 按钮显示优化：将按钮上的{count}改为显示数组长度count.value.length，直观展示当前数组状态，同时更新数组时用count.value.length作为新元素值，避免重复添加固定值

额外说明 #

如果你的信号是在组件内部使用，推荐用useSignal钩子创建组件级信号，更符合React的组件状态管理习惯：

import { useSignal } from "@preact/signals-react";

const App = () => {
  const count = useSignal([0]);
  // ... 其余代码一致
};

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