Error: {#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} 块来显示每个对象时问题就开始了，因为它们不在数组中，我无法弄清楚如何修理它。这是控制台中的确切错误消息：

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

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

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

Answer 1

变化中：

export let posts;

至

export let posts = [];

已解决问题。感谢@Heretic Monkey

Answer 2

这发生在Dispatching到。解决方案不是分配数组，解决方案是这样的：

const array = [];
let newArray = [e.detail, ...array];

Answer 3

我遇到了类似的问题。这是在使用 Firebase Firestore 时发生的，通过将错误值与官方 svelte 文档中给出的原型进行比较，我得出了一个结论。

所以我简单地在检索到的对象上使用了 javascript Object.values() 方法并且 {#each} only iterates over array-like objects 错误消失了。

Answer 4

我遇到了类似的问题并偶然发现了这个 post。很高兴在原始 post 中看到完整的 JSON 回复以提供更大的上下文。就我而言，事实证明我错误地引用了嵌套数组对象。我希望这可以帮助任何有类似问题的人。

不起作用

 <tbody class="uk-text-left">
    <!-- {@debug calendarEventList} -->
    {#if calendarEventList}
      {#each calendarEventList as event}
        <tr>
            <td>{calendarEventList.items[1].summary}</td>
            <td>{calendarEventList.items[1].start.dateTime}</td>
            <td>{calendarEventList.items[1].end.dateTime}</td>
            <td>{calendarEventList.items[1].creator.email}</td>
            
        </tr>
      {/each}
    {/if}
  </tbody>

Uncaught (in promise) Error: {#each only iterates over array-like objects

有效

 <tbody class="uk-text-left">
    <!-- {@debug calendarEventList} -->
    {#if calendarEventList}
      {#each calendarEventList.items as event}
        <tr>
            <td>{event.summary}</td>
            <td>{event.start.dateTime}</td>
            <td>{event.end.dateTime}</td>
            <td>{event.creator.email}</td>
        </tr>
      {/each}
    {/if}
  </tbody>

google 日历 api

的获取请求示例

{
"kind": "calendar#events",
"etag": "\"p334fwehgbta5ve0g\"",
"summary": "Svelte Whosebug",
"updated": "2022-04-11T10:44:38.077Z",
"timeZone": "Europe/Dublin",
"accessRole": "reader",
"defaultReminders": [],
"nextSyncToken": "CMj8_xxxx_cCEAAHSHDHD8-LRAQ==",
"items": [
    {
        "kind": "calendar#event",
        "etag": "\"3299347666786000\"",
        "id": "5rqm5kq33ghd9tuhsktjhoisdvho",
        "status": "confirmed",
        "htmlLink": "https://www.google.com/calendar/event?eid=Npw",
        "created": "2022-04-11T10:43:53.000Z",
        "updated": "2022-04-11T10:43:53.393Z",
        "summary": "Call Back Customer",
        "creator": {
            "email": "abc@gmail.com"
        },
        "organizer": {
            "email": "m04@group.calendar.google.com",
            "displayName": "Svelte Whosebug",
            "self": true
        },
        "start": {
            "dateTime": "2022-04-11T07:15:00+01:00",
            "timeZone": "Europe/Dublin"
        },
        "end": {
            "dateTime": "2022-04-11T08:15:00+01:00",
            "timeZone": "Europe/Dublin"
        },
        "iCalUID": "5rqophoiosktsnibmno@google.com",
        "sequence": 0,
        "eventType": "default"
    },
    {
        "kind": "calendar#event",
        "etag": "\"3299347756154000\"",
        "id": "78flukdyhjjki16ola",
        "status": "confirmed",
        "htmlLink": "https://www.google.com/calendar/event?eid=NzhjAZw",
        "created": "2022-04-11T10:44:25.000Z",
        "updated": "2022-04-11T10:44:38.077Z",
        "summary": "Maintenance at pharma company x",
        "creator": {
            "email": "abc@gmail.com"
        },
        "organizer": {
            "email": "a2gopnm04@group.calendar.google.com",
            "displayName": "Svelte Whosebug",
            "self": true
        },
        "start": {
            "dateTime": "2022-04-14T08:00:00+01:00",
            "timeZone": "Europe/Dublin"
        },
        "end": {
            "dateTime": "2022-04-14T09:00:00+01:00",
            "timeZone": "Europe/Dublin"
        },
        "iCalUID": "78flukukccb2go6asrlki16ola@google.com",
        "sequence": 0,
        "eventType": "default"
    }
]

}

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

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

javascript

ghost-blog

svelte

sapper