本文详解如何修复 Svelte 中因嵌套 {#each} 导致的相关文章重复渲染问题，通过提前过滤数据替代模板内多重条件判断，确保每篇相关文章仅显示一次。
本文详解如何修复 svelte 中因嵌套 `{#each}` 导致的相关文章重复渲染问题，通过提前过滤数据替代模板内多重条件判断，确保每篇相关文章仅显示一次。
在构建博客类 Svelte 应用时，「相关文章」组件常需根据当前文章的标签（tags）匹配其他已发布文章。但若直接在模板中使用嵌套 {#each}（如对每篇文章的 tags 数组再遍历），极易引发重复渲染：例如当前文章含 ["svelte", "tutorial"]，而某篇候选文章也含这两个标签，则该候选文章会在
原始代码的问题核心在于：
✅ 逻辑耦合在模板层；
❌ 缺乏去重机制（同一文章可能被多个标签多次命中）；
❌ #each tags as tag + currentPostTags.includes(tag) 形成笛卡尔式匹配，而非“文章级”语义判断。
✅ 正确解法：数据先行，模板极简
应将筛选逻辑移至脚本层，在数据加载完成后一次性计算出去重后的相关文章列表，再在模板中线性渲染。优化后的实现如下：
<script>
import { getMarkdownPosts } from '$lib/utils/getPosts';
import { onMount } from 'svelte';
let relatedPosts = [];
export let currentPostTitle, currentPostTags;
onMount(async () => {
const allPosts = await getMarkdownPosts();
// 一步完成：排除自身、检查发布时间、匹配至少一个共同标签
relatedPosts = allPosts.filter(post => {
const { title, tags, published } = post.meta;
return (
title !== currentPostTitle &&
published === true &&
currentPostTags.some(tag => tags.includes(tag))
);
});
});
</script>
{#if relatedPosts.length > 0}
<h3>Related posts</h3>
<ul>
{#each relatedPosts as { slug, meta: { title } }}
<li><a href="/blog/{slug}"><h4>{title}</h4></a></li>
{/each}
</ul>
{:else}
<p>No related posts found.</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/2146" title="简篇AI排版"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680265669916.png" alt="简篇AI排版" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/2146" title="简篇AI排版">简篇AI排版</a>
<p>AI排版工具，上传图文素材，秒出专业效果！</p>
</div>
<a href="/ai/2146" title="简篇AI排版" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
{/if}? 关键改进点说明
- 单次过滤，天然去重：filter() 对每篇文章只执行一次判断，返回的是文章对象数组，而非标签匹配事件流，从根本上避免重复。
- 语义清晰的匹配逻辑：使用 currentPostTags.some(tag => tags.includes(tag)) 表达“存在至少一个共同标签”，比嵌套循环更高效、更易读。
-
响应式友好：若后续需支持 currentPostTags 动态变更（如通过 prop 更新），可改用 $: 声明式反应语句：
$: relatedPosts = $posts?.filter(...) || [];
并配合 load 钩子或 store 管理 posts 数据源。
- 错误防御增强：显式检查 published === true（而非仅 published），避免 undefined 或 null 值误判；同时 currentPostTags 应确保为数组（可在 export let 后添加默认值：export let currentPostTags = [];）。
⚠️ 注意事项
- 若 getMarkdownPosts() 返回 Promise，务必在 onMount 中 await，避免 relatedPosts 初始化为未定义导致渲染异常；
- 标签匹配区分大小写（如 "Svelte" ≠ "svelte"），如需忽略大小写，可统一转小写后再比较：
currentPostTags.some(tag => tags.map(t => t.toLowerCase()).includes(tag.toLowerCase()))； - 性能考量：对于数百篇以上文章，该过滤逻辑仍属轻量级；若数据量极大，建议在构建时预生成相关性索引。
遵循“逻辑在脚本，渲染在模板”的 Svelte 最佳实践，既能提升可维护性，又能彻底规避模板层副作用引发的重复渲染陷阱。
