时间戳

首页 > 解决方案 > 道具未出现在 Svelte DevTools 中

javascript - 道具未出现在 Svelte DevTools 中

问题描述

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

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

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

使用我的应用打开的 SvelteDevTools 的屏幕截图

// 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>

标签： javascriptsvelte

解决方案

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

推荐阅读