javascript - 错误 : {#each} only iterates over array-like objects. - Javascript 和 Svelte

Question

<script context="module">
    import GhostContentAPI from '@tryghost/content-api';

    // const api = 'http://localhost/posts';
    const api = new GhostContentAPI({
        url: 'http://localhost',
        key: '95a0aadda51e5d621abd2ee326',
        version: "v3"
    });

    export async function preload({ params, query }) {
        try {
            const response = await api.posts.browse({ limit: 5, fields: 'title, slug' });
            return {
                posts: response
            }
        } catch(err) {
            console.log('Error');
        }
    }
</script>

<script>
    export let posts;
</script>

<svelte:head>
    <title>Blog</title>
</svelte:head>

<h1>Recent posts</h1>
<ul>
    {#each posts as post}
        <li>
            <a rel='prefetch' href='blog/{post.slug}'>{post.title}</a>
        </li>
    {/each}
</ul>

我正在使用 vanilla JavaScript 和 Svelte 来简单地获取博客文章列表，这些文章是来自 Ghost Blog Rest API 的对象。 Ghost API 函数工作正常并提取正确的对象，但在尝试使用 Svelte 的 {#each} 时问题开始了。 block 来显示每个对象，因为它们不在数组中，我不知道如何修复它。这是控制台中的确切错误消息:
Error: {#each} only iterates over array-like objects.
写一个 console.log(response)在 const response 之后声明输出附加图像，但前提是我注释掉 {#each}先封锁。

我猜我只需要将 5 个对象移动到一个数组中，但我也不明白为什么 console.log以上仅在 HTML 被注释掉时有效。

Answer 1

改变:
export let posts;
至
export let posts = [];
解决了这个问题。感谢@Heretic Monkey