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

因为斯维尔特的反应性是通过赋值使用数组触发的 push和splice之类的方法不会自动导致更新。

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

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

Answer 2

斯维尔特的反应性是由任务触发的。（来源：docs）

因此，如果您想在non = [...non, json];中添加更多引号，则必须使用<script> import { onMount } from "svelte"; let non = []; let gettingQuote = false; onMount(() => { getRandomQuote(); }); async function getRandomQuote() { gettingQuote = true; const res = await fetch("https://api.quotable.io/random"); const json = await res.json(); non = [...non, json]; gettingQuote = false; } </script> <div> {#each non as {author, content}} <p>{content} - {author}</p> {/each} <button on:click={getRandomQuote} disabled={gettingQuote}>Get Quote</button> {#if gettingQuote} <span>Getting Quote...</span> {/if} </div>

implementation 'com.google.android.material:material:1.1.0-alpha09'

这里是工作中的example。

如何使用Svelte获取远程API？

2 个答案: