2

我正在尝试设置一个在 TypeScript 中使用上下文的组件。当我尝试运行它时，出现以下错误

TypeError: Cannot destructure property 'registerItem' of '__vite_ssr_import_1__.getContext(...)' as it is undefined.
    at carouselItem.svelte:16:24
    at Object.$$render (C:\...\node_modules\svelte\internal\index.js:1380:22)
    at Object.default (/src/lib/Header/header.svelte:108:109)
    at eval (/src/lib/Carousel/carousel.svelte:63:68)
    at Object.$$render (C:\...\node_modules\svelte\internal\index.js:1380:22)
    at eval (/src/lib/Header/header.svelte:107:165)
    at Object.$$render (C:\...\node_modules\svelte\internal\index.js:1380:22)
    at eval (C:\...\src\routes\__layout.svelte:24:94)
    at Object.$$render (C:\...\node_modules\svelte\internal\index.js:1380:22)
    at root.svelte:36:44

我一直在关注文档中的示例，所以我不确定我哪里出错了。我觉得我可能犯了一个愚蠢的错误，但无论哪种方式，任何帮助都会受到赞赏。

这是我一直试图运行的

carousel.svelte

<script context="module" lang="ts">
    export const carouselContext = {}

    export type CarouselContext = {
        registerItem: (item: CarouselItem) => void
        prevItem: Writable<CarouselItem> | null
        activeItems: Writable<CarouselItem[]> | null
        nextItem: Writable<CarouselItem> | null
    }
</script>

<script lang="ts">
    import { setContext, onDestroy } from 'svelte'
    import { Writable, writable } from 'svelte/store'
    import type { CarouselItem } from './carouselItem.svelte'

    export const loop = true
    export const visibleItems = 1
    export let index = 0 // The first of the visible items
    
    const carouselItems: CarouselItem[] = []
    const prevItem: Writable<CarouselItem | null> = writable(null)
    const activeItems: Writable<CarouselItem[] | null> = writable(null)
    const nextItem: Writable<CarouselItem | null> = writable(null)

    const computedIndex = (i: number) => ...

    function updateVisible(i: number) {
        ...
    }

    setContext<CarouselContext>(carouselContext, {
        registerItem: (item: CarouselItem) => {
            ...
        },
        prevItem,
        activeItems,
        nextItem,
    })

    $: updateVisible(index)
</script>

<div class="carousel">
    <slot></slot>
</div>

carouselItem.svelte

<script lang="ts" context="module">
    export type CarouselItem = {
        ...
    }
</script>

<script lang="ts">
    import { getContext } from 'svelte'
    import carouselContext, { CarouselContext } from './carousel.svelte'

    let isPrev = false
    let isActive = false
    let isNext = false

    let ref
    const { registerItem, prevItem, activeItems, nextItem } = getContext<CarouselContext>(carouselContext)

    const thisItem: CarouselItem = {
        ...
    }
    registerItem(thisItem)

    prevItem.subscribe(value => isPrev = value === thisItem)
    activeItems.subscribe(value => isActive = value.indexOf(thisItem) !== -1)
    nextItem.subscribe(value => isNext = value === thisItem)

    $: isRendered = isPrev || isActive || isNext
</script>

{#if isRendered}
    <div class="carousel-item">
        <slot></slot>
    </div>
{/if}
4

0 回答 0