javascript - 如何使用 svelte 获取远程 API？

Question

我正在从 API 获取报价，并且获取似乎有效，因为第一个 console.log 被正确调用，但第二个则不然。内容是来自 API 的 json 对象中的一个字段。

<script>
    import { onMount } from "svelte";
    let non = [];


    onMount(async function() {
        const res = await fetch("https://api.quotable.io/random");
        const json = await res.json();
        non.push(json);
        console.log(non);
    });

</script>

<div>
   {#each non as {content}}
   <p>{content}{console.log(content)}</p>
   {/each}
</div>

Answer 1

Because Svelte's reactivity is triggered by assignments, using array methods like push and splice won't automatically cause updates.

在您的示例中，如果将 non.push(json) 替换为 non = [json] ，则似乎 work .

https://svelte.dev/tutorial/updating-arrays-and-objects