苗条，删除元素

Question

Svelte 的新手要温柔！

我遵循了一些教程示例，使用每个块创建项目列表，然后删除项目，但它们都使用数组作为数据存储，然后 splice/slice 等删除项目，例如在；

https://svelte.dev/tutorial/keyed-each-blocks

我正在尝试使用来自异步 json 占位符请求的 JSON 数据存储来实现类似的事情。

这是我目前所拥有的 https://svelte.dev/repl/9d1bc0a8af79459f8ad0cd6c9cb82fa2?version=3.29.4

我只是在删除函数中使用常规 javascript 来销毁一个元素，但我想访问 Svelete 内置的 animate/transition 效果并以一种简洁的方式实现同样的事情。

非常欢迎任何建议和帮助。谢谢

Answer 1

您所做的实际上不是 return 来自 promise 的数据，而只是一个成功状态，您将数据本身保存到一个单独的变量中：

let things = []

async function getThings(){
  const res = await fetch(`https://jsonplaceholder.typicode.com/users`);
  const json = await res.json();

  if (res.ok) {
    // save the result to json
    things = json;
    // you can even leave this part out
    return true;
  } else {
    throw new Error(text);
  }
}

那么当 promise 已解决时，您当然会遍历数组：

{#await promise}
    <p>...waiting</p>
{:then success}
  {#each things as thing, index (thing.id)}
    stuff goes here
  {/each}
{/await}

最后，在删除函数中，您现在可以操作数组了：

function onDelete(id) {
    things = things.filter(t => t.id != id)
}

另一种方法是将获取数据与显示数据分开，方法是使数据成为两个不同的组件：

{#await promise}
    <p>...waiting</p>
{:then things}
  <DisplayComponent data={things} />
{/await}

在 DisplayComponent 中，您的数据现在将位于常规数组中，您可以随心所欲地使用它。这样做的一个优点是您可以通过发送模拟数据来独立测试 DisplayComponent。

苗条，删除元素

Svelte, removing elements

svelte