“Duplicate elements in #each Svelte” 可以翻译为 “Svelte 中 #each 中的重复元素”。

huangapple
go评论141阅读模式
英文:

Duplicate elements in #each Svelte

问题

您可以通过在循环相关文章时使用一个额外的集合来跟踪已经添加的文章，以避免重复。以下是修改后的代码：

  1. <script>
  2.     import { getMarkdownPosts } from '$lib/utils/getPosts';
  4.     let posts = getMarkdownPosts();
  5.     let addedArticles = []; // 用于跟踪已经添加的文章
  7.     export let currentPostTitle, currentPostTags;
  9.     function hasArticleBeenAdded(slug) {
  10.         return addedArticles.includes(slug);
  11.     }
  13.     function markArticleAsAdded(slug) {
  14.         addedArticles.push(slug);
  15.     }
  16. </script>
  18. {#await posts}
  19.     Loading...
  20. {:then posts}
  21.    Related posts
  22.     <ul>
  23.         {#each posts as {slug, meta: {title, tags, published}}}
  24.             {#if published}
  25.                 {#if currentPostTitle != title && !hasArticleBeenAdded(slug)}
  26.                     {#each tags as tag}
  27.                         <!-- {#if index === 1 } -->
  28.                             {#if currentPostTags.includes(tag)}
  29.                                 <li><a href="/blog/{slug}"><h4>{title}</h4></a></li>
  30.                                 {#each posts as post}
  31.                                     {#if post.slug === slug}
  32.                                         {#exec markArticleAsAdded(slug)}
  33.                                     {/if}
  34.                                 {/each}
  35.                             {/if}
  36.                         <!-- {/if} -->
  37.                     {/each}
  38.                 {/if}
  39.             {/if}
  40.         {/each}
  41.     </ul>
  42. {/await}

这样，您将使用 addedArticles 数组来跟踪已经添加的文章的 slug，并且只有当文章未被添加时才添加它们到相关文章列表中。当您添加文章后，使用 markArticleAsAdded(slug) 函数来将文章标记为已添加，以确保不会重复列出相同的文章。

英文:

I have a component on related posts on the Svelte website. It works, but the problem is that it duplicates the articles in the block. That is, for example, if I have three identical tags contained in two articles, then in each of these articles another article in the related posts block will be listed three times.

  1. &lt;script&gt;
  2.     import { getMarkdownPosts } from &#39;$lib/utils/getPosts&#39;
  4.     let posts = getMarkdownPosts()
  6.     export let currentPostTitle, currentPostTags
  8. &lt;/script&gt;
  10. {#await posts}
  11.     Loading...
  12. {:then posts}
  13.    Related posts
  14.     &lt;ul&gt;
  15.         {#each posts as {slug, meta: {title, tags, published}}}
  16.             {#if published}
  17.                 {#if currentPostTitle != title}
  18.                     {#each tags as tag}
  19.                         &lt;!-- {#if index === 1 } --&gt;
  20.                             {#if currentPostTags.includes(tag)}
  21.                                 &lt;li&gt;&lt;a href=&quot;/blog/{slug}&quot;&gt;&lt;h4&gt;{title}&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
  22.                             {/if}
  23.                         &lt;!-- {/if} --&gt;
  24.                     {/each}
  25.                 {/if}
  26.             {/if}
  27.         {/each}
  28.     &lt;/ul&gt;
  29. {/await}

How can I change this code so that this does not happen?

答案1

得分: 0

我考虑了一下，重新编写了这个组件。现在它工作得很好。

英文:

I thought about it and rewrote the component. It's working fine now

  1. &lt;script&gt;
  2.     import { getMarkdownPosts } from &#39;$lib/utils/getPosts&#39;
  3.     import { onMount } from &#39;svelte&#39;
  5.     let posts = []
  6.     let relatedPosts = []
  8.     export let currentPostTitle, currentPostTags
  10.     onMount(async () =&gt; {
  11.       posts = await getMarkdownPosts()
  12.       filterRelatedPosts()
  13.     })
  15.     function filterRelatedPosts() {
  16.       relatedPosts = posts.filter(post =&gt; {
  17.         // Exclude the current post and duplicates based on tags
  18.         return (
  19.           post.meta.title !== currentPostTitle &amp;&amp; post.meta.published &amp;&amp;
  20.           currentPostTags.some(tag =&gt; post.meta.tags.includes(tag))
  21.         )
  22.       })
  23.     }
  24.   &lt;/script&gt;
  26.   {#if relatedPosts.length &gt; 0}
  27.     Related posts
  28.     &lt;ul&gt;
  29.       {#each relatedPosts as { slug, meta: { title } }}
  30.         &lt;li&gt;&lt;a href=&quot;/blog/{slug}&quot;&gt;&lt;h4&gt;{title}&lt;/h4&gt;&lt;/a&gt;&lt;/li&gt;
  31.       {/each}
  32.     &lt;/ul&gt;
  33.   {:else}
  34.     No related posts found.
  35.   {/if}

huangapple
  • 本文由 发表于 2023年8月5日 02:49:48
  • 转载请务必保留本文链接：https://go.coder-hub.com/76838499.html
  • arrays
  • javascript
  • svelte
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定