苗条的返回无效的数组长度

Question

我有一个 api 可以成功地从 mongodb 中检索到一个集合。 console.log(posts) 显示了 post 的预期数组。

用 for {each} 遍历数组 returns 一个错误

Home.svelte:90 Uncaught (in promise) RangeError: Invalid array length

我错过了什么？为什么每 post 一张卡都没有退回？

感谢您的帮助。

<script>
  import { onMount } from "svelte";

  const apiBaseUrl = "http://localhost:5100/api";

  onMount(async () => {
    const res = await fetch(apiBaseUrl + "/list");
    posts = await res.json();
    console.log(posts)
  });

</script>

<div class="row">
    {#each posts as post}
      <div class="col s6">
        <div class="card">
          <div class="card-content">
            <p class="card-title">{post.title}</p>
            <p>{post.body}</p>
          </div>
        </div>
      </div>
    {/each}
</div>

Answer 1

问题是您在 Svelte 呈现组件时没有定义 posts。当你 API 调用是异步帖子时，each 块运行时将未定义。

您所要做的就是在主脚本块的某处定义 posts:

let posts = [] // <- an empty array

然后在获取后它将重新呈现您的 API 个帖子。

这是一个 working demo in the REPL 注意：我不得不稍微更改你的代码，因为我使用的 API 与你本地的结构不同。

您还可以查看 #await，它可以让 Svelte 处理异步代码。然而，这并不适用于所有异步问题。我两种方法都用。

TIP: You don't need to wrap your onMount function call. Svelte will only fetch your posts once.

苗条的返回无效的数组长度

svelte returning invalid array length

svelte