Question

我有一个可以从mongodb成功检索集合的api。 console.log（posts）显示了期望的发布数组。

使用for {each}遍历数组将返回错误

Home.svelte：90未捕获（承诺）RangeError：无效的数组长度

我错过了什么？为什么每个帖子都没有归还卡片？

感谢您的帮助。

<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与本地API的结构不同，因此我不得不对您的代码稍作更改。

您还可以查看#await，它使Svelte处理异步代码。但是，这并不适合所有异步问题。我同时使用两种方法。

提示：您不需要包装onMount函数调用。 Svelte只会提取您的帖子一次。

svelte返回无效的数组长度

1 个答案: