javascript - Svelte 应用程序不会在浏览器中呈现我的数据

Question

我对 Svelte 很陌生，我正在尝试在浏览器中呈现我的数据对象。我不确定发生了什么，因为后端似乎没问题，我可以在控制台中打印数据对象。
我有一个读取以下 url 的后端 flask api
https://api.le-systeme-solaire.net/rest/bodies/
一切正常，工作正常。如果您查找它，您可以看到 json 的样子
这是我的 index.svelte 文件的上半部分:

<script>

let data = []

async function initFetchSolarSystemData() {
 let response = await fetch("http://127.0.0.1:5000/solar-system/gravity");
 data = await response.json();

console.log("data", data)
console.log(["id", data.bodies[0].id])
console.log(["gravity", data.bodies[0].gravity])
console.log(["bodies", data.bodies.length])
}

initFetchSolarSystemData()

</script>

因此，当它运行时，我可以在控制台中看到如下值:

['id', 'lune']
['gravity', 1.62]
'bodies', 287]

所以这似乎也很好。这是文件的底部，我认为错误源于:

<section>

    {#if data.length}
        {#each data.bodies as item}

            <div class="gravity">
              <h1 id="item">
                {item.gravity}
              </h1>
            </div>

        {/each}
    {/if}

</section>

当我运行脚本时，控制台中没有错误。没有渲染。如果我替换这一行:

 {#if data.length}

和

{#if data.bodies.length}

我得到:

Cannot read properties of undefined (reading 'length')

我对此感到困惑，因为这些值是在文件前面的前面读取的。
我想我在这里遗漏了一些东西，任何帮助将不胜感激。

Answer 1

tl;博士:有一个 Array/Object混合;更改{#if data.length}至{#if data.bodies?.length} .
问题

When the I run the script, I get no errors in the console. Nothing renders.

当 {#if data.length}第一次评估， data变量仍然保存初始的空数组，所以 #if得到一个假 0 .
这也是为什么要替换 {#if data.length}与 {#if data.bodies.length}导致错误 — data.bodies是未定义的，所以 length查找失败。
后来当 fetch完成， data分配了 Object ，所以 {#if data.length}这一次得到一个假 undefined .
因此，在 fetch 之前和之后— 没有渲染。

解决方案 data应该是 Object而不是 Array ，以及 #if因此应该检查 data.bodies 的长度而不是 data本身。
然后，要么:
#1:WAITING获取
包裹 <section>…</section>的内容与 Svelte's await block如下:

  {#await initFetchSolarSystemData()}
    <p>Loading…</p>
  {:then data}
    …
  {:catch error}
    <p>Uh oh, an error.</p>
  {/await}

另外，为方便起见:

修改initFetchSolarSystemData()函数到 return data .

删除 initFetchSolarSystemData()调用您的<script>…</script>部分。

演示: https://codesandbox.io/embed/lively-river-dni3l6?fontsize=14&hidenavigation=1&theme=dark

#2:获取 false首先让 Svelte 稍后触发更新
(非常感谢 @StephaneVanraes 指出这一点)
或者， #if和 #each在 fetch 之前运行时可能首先默默地“失败” ，而 Svelte 将随后 trigger an update曾经 fetch完成并将接收到的对象分配给 data .
例如，这可以通过设置 data 来完成。与 bodies从一开始的属性(property):

let data = { bodies: [] }
{#if data.bodies.length}

或使用 optional chaining operator :

{#if data.bodies?.length}

演示 : https://codesandbox.io/embed/hungry-lederberg-78pr3g?fontsize=14&hidenavigation=1&theme=dark

我希望这回答了你的问题。 =)
另请查看 @StephaneVanraes 的答案.