Preact Signals中activeWindows更新后组件交替不重渲染问题咨询

核心问题：未使用SolidJS响应式遍历组件<For> #

在SolidJS中，直接用原生数组的map方法遍历响应式数组，无法自动跟踪数组的元素增删/变化，只会在组件初始渲染时执行一次。这就导致你通过filter更新activeWindows后，父组件无法感知数组变化并触发对应DOM更新，出现交替生效的异常表现。

分步解决方案 #

1. 修复Signal定义的语法错误 #

你的activeWindows数组中第一个对象未闭合花括号，会引发JS解析异常，先修正语法：

export const activeWindows = signal([
  {
    index: 1,
    title: 'App1',
    isMinimized: false,
    dimensions: {
      // ...你的维度配置
    }
  },
  {
    index: 2,
    title: 'App2',
    isMinimized: false,
    dimensions: {
      // ...你的维度配置
    }
  }
  // ...其他窗口对象
]);

2. 替换map为<For>组件遍历数组 #

将父组件中的array.map替换为SolidJS提供的<For>组件，它会自动跟踪数组的响应式变化，精准更新DOM：

import { For } from 'solid-js';

// ...父组件代码
<For each={activeWindows.value}>{(window) => (
  <AppWindow 
    key={window.index}
    idx={window.index}
    title={window.title}
    isMinimized={window.isMinimized}
    dimensions={window.dimensions}
    handleClose={() => handleClose(window.index)}
  />
)}</For>

注：可直接把key放在AppWindow组件上，无需额外包裹<Fragment>，<For>的子元素可以直接是组件。

3. 优化handleClose函数的类型定义 #

把index的类型从any改为number，避免类型歧义：

function handleClose(index: number){
  activeWindows.value = activeWindows.value.filter(window => window.index !== index);
}

为什么之前会交替生效？ #

这种异常是语法错误导致数组结构异常，加上原生map无法响应式更新的双重作用，使得部分元素的更新逻辑混乱。修复语法并使用<For>组件后，就能保证数组的每一次变化都触发对应的DOM更新。

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