道具未出现在 Svelte DevTools 中

Question

我正在构建一个应用程序作为学习 Svelte 的一种方式。一切正常，但是当我在 Svelte DevTools 中查看它时，组件上的道具没有出现，尽管它们的值作为数组出现在状态中。我想我一定是做错了什么，但谁能告诉我是什么？

屏幕截图显示了加载了 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

修复

道具未出现在 Svelte DevTools 中

Props not appearing in Svelte DevTools

javascript

svelte