Svelte 使 {#await} 语句的 {:then} 值具有反应性

Question

我必须进行 api 调用，然后显示数据（数组）。我想对数组进行排序，但是显示的数据没有更新。我想这是因为我的 data 不是反应变量？如何在 data 更改时让我的 each 循环重新运行？

我的代码（简化版）：

{#await promise} // api call
    <p>Loading</p>
{:then data}
    <button on:click={() => data.sort()}>sort data</button> // does not work
    {#each data as student}
        <p>{student.firstname}</p>
    {/each}
{/await}

Answer 1

data 是反应变量。承诺的存在与问题无关：即使 data 是一个普通变量也会发生这种情况。问题是当您单击按钮时，Svelte 无法正确识别 data 发生的变化。您可以通过显式分配给 data.

来强制 Svelte 接受更改

另一个问题是，如果不提供自定义排序功能以根据对象的键进行排序，您就无法对对象进行排序。 .sort((a, b) => a.firstname.localeCompare(b.firstname)) 根据对象的 firstname 属性排序。

综合起来我们得到：

<button on:click={() => data = data.sort((a, b) => a.firstname.localeCompare(b.firstname))}>sort data</button>

Svelte 使 {#await} 语句的 {:then} 值具有反应性

Svelte make {:then} value of {#await} statement reactive

request

svelte