时间戳

首页 > 解决方案 > 过滤 Svelte Promise 的结果

svelte-3 - 过滤 Svelte Promise 的结果

问题描述

在使用Svelte制作我的第一个应用程序时，我喜欢它，除了在从名为search的文本输入中过滤承诺的结果时出现的以下内容。

在 promise 解决之前过滤产品失败，因为products是 type function。

在继续之前，我必须进行类型检查...

typeof products === "object" && ...


{#await promise then products}
    <div class="flex justify-center flex-wrap">
        {#each typeof products === "object" && 
            products.filter((s) => 
                s.name.toLocaleLowerCase().includes(search.toLocaleLowerCase())
            ) as product
        }
            <Product
                {product}
                {handleSelectProduct}
                selected={selectedProducts.includes(product)}
            />
        {/each}
    </div>
{/await}

有没有办法避免这种情况？

谢谢

标签： svelte-3

解决方案

应该不需要 validate typeof products === "object"。但将逻辑（如过滤器）排除在模板之外并保持模板“精简”是一种很好的做法。

见下面的例子（可以运行https://svelte.dev/repl/）

<script>
  let search = "c";
  let promise = new Promise((resolve) => {
    resolve([{ name: "abc" },{ name: "bcd" },{ name: "cde" },{ name: "def" }]);
  });

  $: filtered = promise.then((r) =>
    r.filter((s) =>
      s.name.toLocaleLowerCase().includes(search.toLocaleLowerCase())
    )
  );
</script>

<input bind:value={search}>

{#await filtered then products}
  <ul>
    {#each products as product}
    <li>{product.name}</li>
    {/each}
  </ul>
{/await}

{#await promise then products}
  <ul>
    {#each products.filter((s) =>
      s.name.toLocaleLowerCase().includes(search.toLocaleLowerCase())) as product
    }
    <li>{product.name}</li>
    {/each}
  </ul>
{/await}

两个块的结果相同，因此typeof不需要检查（但第一个块对眼睛来说更容易一些）。

如果您遇到需要您验证产品类型的问题，您应该检查承诺的结果。

推荐阅读