道具未出现在Svelte DevTools中

Question

我正在构建一个应用程序，以学习Svelte。它们都运行良好，但是当我在Svelte DevTools中查看它们时，组件上的props不会出现，尽管它们的值在状态中显示为数组。我想我一定做错了什么，但是谁能告诉我什么？

屏幕截图显示了加载了Artist组件的应用程序。我希望它具有一个artistId值的1道具，但事实并非如此。

代码中的page()函数来自我用于路由的Page.js。

// app.js

import page from 'page'

import App from './views/App.svelte'

const app = new App({
    target: document.body,
    props:  {
        artistId: null,
        route: null,
    },
})

function artist (ctx) {
    const artistId = ctx.params.artistId

    app.$set({
        route:    'artist',
        artistId: artistId,
    })
}

page('/artist/:artistId', artist)
page()

// App.svelte

<script>
    import Artist      from './Artist.svelte'
    import Head        from '../parts/Head.svelte' // sets page titles
    import Home        from './Home.svelte'
    import HomeLink    from '../parts/HomeLink.svelte' // navigation

    export let artistId
    export let route
</script>

<HomeLink route={route} />

{#if route === 'artist'}
    <Artist artistId={artistId} />
{:else}
    <Home />
{/if}

// Artist.svelte

<script>
    import { onMount } from 'svelte'
    import { pageName } from '../stores.js'

    export let artistId

    let artistName

    onMount(async () => {
        // fetches various details from API, sets artistName etc

        $pageName = `Artist details: ${artistName}` // used by Head.svelte
    })
</script>

Answer 1

这是一个已知问题-应该由https://github.com/sveltejs/svelte/pull/3822

修复