Deno Fresh中Island组件内列表无法更新问题求助

问题核心 #

你在MyIsland组件中用useSignal维护消息列表，WebSocket收到新消息时通过push修改数组后，数据确实更新但页面未同步渲染新消息。

原因 #

Deno Fresh的useSignal依赖值的引用变更触发组件重渲染。push仅修改原数组内容，数组本身的引用未变，信号无法检测到变化，因此不会触发组件更新。

解决方案 #

有两种可行的修改方式：

1. 创建新数组替换原数组 #

生成包含新消息的新数组替换原信号值，通过引用变更触发重渲染：

const updateMessages = useCallback((m: MessageEvent<string>) => {
    const data: WsData = JSON.parse(m.data);

    if (data.type == SocketMessageType.Text){
        const message: Message = data.value;
        // 用新数组替换原数组，触发信号更新
        messageList.value = [...messageList.value, message];
    }
}, [messageList]) // 需将messageList加入依赖数组，避免闭包导致的旧值问题

2. 使用useMutableSignal（Fresh 1.4+） #

若你的Fresh版本为1.4及以上，可使用useMutableSignal，它支持直接修改复杂对象/数组的内部值并触发更新：

// 替换useSignal为useMutableSignal
const messageList = useMutableSignal<Message[]>([]);

const updateMessages = useCallback((m: MessageEvent<string>) => {
    const data: WsData = JSON.parse(m.data);

    if (data.type == SocketMessageType.Text){
        const message: Message = data.value;
        // 直接push，useMutableSignal会检测到内部变化并触发更新
        messageList.value.push(message);
    }
}, [messageList])

额外注意事项 #

• 你的useEffect依赖数组为空，若props.username可能动态变化，需将其加入依赖数组，避免WebSocket连接逻辑仅执行一次。
• useCallback的依赖数组必须包含所有内部用到的信号/变量，否则会出现闭包导致的旧值问题。

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