svelte - 如何触发/强制更新 Svelte 组件

Question

我试图让我的头脑围绕 slim 的 3 react 性事情......

我想在单击按钮时强制刷新 UI。我正在使用自定义组件 AsyncFetcher接受 HTTP 发布数据，并返回 data其插槽的对象(http 发布结果)。

我想要一个禁用功能。因此，当单击“禁用”按钮时，会调用 http api，然后刷新数据 View 。

<script>
    export let id

    function onDisable() {
        fetch('disable-api-url', {id: id})
        // Then ??
        // What to do after the fetch call, to refresh the view
    }
</script>

<AsyncFetcher postParam={id} let:data>
    {data.name}

    <button on:click={??}>Refresh</button>
    <button on:click={onDisable}>Disable Item</button>
</AsyncFetcher>

我试着做 on:click={() => id=id}欺骗它刷新无济于事。如 id将是一个对象而不是字符串 id={...id}本来可以工作的，不幸的是，这里并非如此。

实现这一目标的正确方法是什么？

Answer 1

使用组件来管理获取是非常非常规的。通常你会在 onMount 中获取数据，或在事件处理程序中:

<script>
  import { onMount } from 'svelte';

  let initialData;
  let otherData;

  onMount(async () => {
    const res = await fetch('some-url');
    initialData = await res.json();
  });

  async function update() {
    const res = await fetch('some-other-url');
    otherData = await res.json();
  }
</script>

{#if initialData}
  <p>the data is {initialData.something}</p>
{/if}

<button on:click={update}>update</button>