错误：{#each} 只迭代类似数组的对象。-- 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 博客 Rest API 的对象。Ghost API 函数工作正常并拉出正确的对象，但是当尝试使用 Svelte 的{#each}块来显示每个对象时问题就开始了，因为它们不在数组中，我无法弄清楚如何修复它。这是控制台中的确切错误消息：

Error: {#each} only iterates over array-like objects.

console.log(response)在const response声明后写 a输出附加的图像，但前提是我先注释掉{#each}块。

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

Answer 1

改变：

export let posts;

到

export let posts = [];

解决了这个问题。感谢@Heretic Monkey