如何在 Svelte 中过滤通过异步等待检索的列表？

Question

我是第一次使用 Svelte，我正在尝试弄清楚如何对从 API 检索到的列表应用过滤。我的 EventsIndex 组件非常简单，包含以下逻辑：

import FetchPosts from '../services/postsByType'
import EventCard from '../components/EventCard.svelte'

export let post_type

let events = new FetchPosts( post_type ).get()
let currentCategory = 0

function updateCategory( catId ) {
    currentCategory = catId
}

一切正常。

我也在使用 await 模板语法来显示相关数据：

{#await events}
    <h1>loading...</h1>
{:then events}
    <section class="grid">
        {#each events as event}
            <EventCard event={event} on:filter={updateCategory}/>
        {/each}
    </section>
{:catch error}
    <p>Something went wrong...</p>
{/await}

缺少的部分是反应性过滤列表。我认为我可以执行以下操作，但它会生成错误 events.map is not a function，这是有道理的，因为调用 filteredEvents 时事件变量将是未解决的承诺。

$: filteredEvents = () => {
    if (currentCategory === 0) return events

    return events.filter( event => {
        return event.categories !== null
            ? event.categories.some( cat => cat.id == currentCategory )
            : false
    })
}

那么我如何添加一个反应性的 filteredEvents 函数，我也可以将它包含在我的模板中？

Answer 1

过滤 {#each} 循环内的事件应该有效。如果过滤函数像这样非常短，我会内联应用它

{#each events.filter(e => e.id === currentId) as event}

举个例子。由于在您的情况下，过滤器功能更为复杂，因此将其移至功能可能是更好的选择

filterEvents(events, currentCategory) {
    if (currentCategory === 0) return events

    return events.filter( event => {
        return event.categories !== null
            ? event.categories.some( cat => cat.id == currentCategory )
            : false
    })
}
</script>

...

{#each filterEvents(events, currentCategory) as event}

（我想你可以替换这个

 return event.categories !== null
            ? event.categories.some( cat => cat.id == currentCategory )
            : false

由此

event?.categories.some( cat => cat.id === currentCategory )

如何在 Svelte 中过滤通过异步等待检索的列表？

How do I filter lists, retrieved via async await, in Svelte?

asynchronous

svelte