如何使用 svelte 获取远程 API？

Question

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

<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

由于 Svelte 的反应性是由赋值触发的，因此使用push和等数组方法splice不会自动导致更新。

在你的例子中，如果你non.push(json)用non = [json]它替换似乎可行。

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