过滤 Svelte Promise 的结果

Question

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

在承诺解决之前过滤 products 失败，因为 products 是 function 类型。

在继续之前，我必须包含 type 检查...

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}

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

谢谢

Answer 1

应该不需要验证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（但第一个检查更容易一些）。

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