Svelte中如何为分组名称显示标题？问题排查与解决

问题原因 #

你遇到的问题核心是直接在{#each}循环里修改响应式变量的时机，和Svelte的渲染逻辑不匹配。Svelte的响应式更新靠变量赋值触发，但循环内部的赋值操作会和循环渲染顺序冲突：

• 第一次循环到Amber时赋值currentName，触发响应式更新导致组件重渲染，但第二次循环的Amber可能在更新完成前就执行了判断，导致标题重复显示。
• 最后一个Charlie的情况，大概率是循环结束后变量赋值没触发对应的渲染更新，或是判断条件因状态不一致跳过了标题渲染。
  另外，直接在模板里写{currentName = name}这种赋值操作本身就不符合Svelte的最佳实践——模板应该只负责渲染，状态修改要放在脚本部分。

修复方法 #

方法1：预处理成分组结构（推荐） #

先把原始数组转成分组后的结构，再用两层循环渲染，彻底避开状态冲突：

脚本部分

<script>
  const names = ['Amber','Amber', 'Brian', 'Charlie','Charlie'];
  
  // 把数组处理成{name: 分组名, items: 对应名称列表}的结构
  const groupedNames = Object.entries(
    names.reduce((acc, name) => {
      acc[name] = [...(acc[name] || []), name];
      return acc;
    }, {})
  ).map(([name, items]) => ({ name, items }));
</script>

模板部分

<div>
  {#each groupedNames as group}
    <strong>{group.name}</strong>
    {#each group.items as name}
      <div>{name}</div>
    {/each}
  {/each}
</div>

这种方式把分组逻辑和渲染逻辑完全分离，代码更易维护，而且完全符合Svelte的响应式机制，不管数组后续怎么动态变化，标题和列表都会正确更新。

方法2：循环内对比前后项 #

如果不想预处理数组，也可以利用{#each}的索引参数，对比当前项和前一项的值来决定是否显示标题：

<script>
  let names = ['Amber','Amber', 'Brian', 'Charlie','Charlie'];
</script>

<div>
  {#each names as name, index}
    {#if index === 0 || name !== names[index - 1]}
      <strong>{name}</strong>
    {/if}
    <div>{name}</div>
  {/each}
</div>

这种方式不需要额外的响应式变量，靠索引对比就能解决问题，但如果数组是动态变化的，要确保用let声明数组保证响应式。

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