javascript - 错误:{#each} 仅迭代类似数组的对象。-- Javascript & Svelte
问题描述
<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.
console.log(response)
在声明后写 aconst response
输出附加图像,但前提是我先注释掉该{#each}
块。
我猜我只需要将 5 个对象移动到一个数组中,但我也不明白为什么console.log
上面的方法只在 HTML 被注释掉时才有效。
解决方案
改变:
export let posts;
至
export let posts = [];
解决了这个问题。感谢@Heretic Monkey
推荐阅读
- c# - 与 Crystal Reports 的 CDATA ADO 连接不显示数据
- c - 这个函数的行为是什么?(二的幂)
- javascript - 我的计数器没有给我正确的值
- vb.net - 编写 Button 以显示 ListBox 中的项目列表
- vb.net - Automapper:禁止自动创建未专门映射的地图?
- c# - 如何输入 2 或 4 个方程作为方程系统并将其用作 C# 中的变量?也许可以从 MATLAB 转换?
- gtk - gtk 错误消息 键文件包含不是键值对、组或注释的行
- android - Android Studio - 错误 x86 硬件加速
- ansible - 如何检索特定字典的名称 - Ansible
- reactjs - 当我只在主页上需要它们时,是否需要将数据放入 redux 存储中?