Question

斯维尔特（Svelte）的新手要柔和！

我已经跟随了一些教程示例，使用每个块创建了项目列表，然后删除了项目，但是它们都使用数组作为数据存储，然后进行拼接/切片等操作来删除项目，例如：

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

我正在尝试通过异步json占位符请求通过JSON数据存储实现类似的功能。

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

我只是在delete函数中使用常规的javascript来破坏元素，但是我想访问Svelete内置的动画/过渡效果，并以一种精巧的方式实现相同的目的。

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

Answer 1

您要做的是实际上不从诺言中返回数据，而只是返回成功状态，将数据本身保存到单独的变量中：

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);
  }
}

然后您当然会在诺言解决后在数组上循环：

{#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。

苗条，去除元素

1 个答案: