Svelte 迭代键数组并从对象中获取键

Question

我有一个对象comments ：

let comments = {"id1": ..., "id2: ..., ...};

然后我有一个数组commentsSortedByDate ：

let commentsSortedByDate = ["id2", "id1", ...];

我想重复这些评论。 这是我尝试过的：

{#each commentsSortedByDate as commentId}
    <script> let comment = comments[commentId]; </script>
    <div class="comment" class:new={comment.isNew}> ... </div>
{/each}

这不起作用。 我如何在循环中定义这个comment变量，以便我可以多次访问它而不必每次都输入comments[commentId] ？

Answer 1

现在，除了您提出的建议（ each hack 或总是做comments[commentId] ）之外，没有其他办法可以做到这一点。 Svelte 有一个即将到来的新功能，这将使这成为可能： 在标记中使用 @const 。 这还没有实现，但是当它实现时，你可以这样做：

{#each commentsSortedByDate as commentId}
    {@const comment = comments[commentId]}
    <div class="comment" class:new={comment.isNew}> ... </div>
{/each}

Answer 2

或者您可以简单地动态重新映射您的输入数组并迭代comment对象而不是 id：

{#each commentsSortedByDate.map(id => comments[id]) as comment}
    <div class="comment" class:new={comment.isNew}> ... </div>
{/each}

Answer 3

我想出了一个骇人听闻的解决方案，但我不会接受这是一个正确的答案。

{#each commentsSortedByDate as commentId}
    {#each [comments[commentId]] as comment}
        <div class="comment" class:new={comment.isNew}> ... </div>
    {/each}
{/each}

Answer 4

您是否正在寻找这样做这样？

<script>
  let commentsSortedByDate = ["id2", "id1"];
  let comments = {
    id1: {
      text: "lorem",
    },
    id2: {
      text: "ipsum",
    },
  };
</script>

<h2>
    Comments
</h2>
{#each commentsSortedByDate as comment}
  <ul>
    <li>
            {comment}: {Object.values(comments[comment])}
    </li>
  </ul>
{/each}