javascript - sveltekit:尽管 URL 已更改，但组件未被第二次呈现

Question

我是 sveltekit 的新手。

我有一个页面 [symbol].svelte。

http://localhost:3000/stocks/mnr-pc = host/stocks/[symbol]

当 URL 的符号发生变化时，它应该从 API 获取该符号的数据并将数据作为 props 传递给子组件。

要更改别名/符号，我在页面顶部有一个搜索框。我搜索一个符号，当我点击搜索框中的任何符号时，我更改了 url。

例如:如果我选择符号“tsla”，我会将 URL 更改为 http://localhost:3000/stocks/tsla。

问题是，第一次更改URL时，它从API中获取数据，并通过子组件显示数据。但在那之后，如果我再次搜索一个新的符号并点击它，虽然路由器改变了，但 UI 上的数据仍然保持不变。

[symbol].svelte 这个文件在 routes/stocks 文件夹中

<script context="module">
    import StockSymbol from '$lib/stocks/index.svelte';
    import data from '../../../static/symbols.json';

    let props;
    let symbolName;
    export const hydrate = true

    export async function load({ page, fetch }) {
        symbolName = page.params.symbol;
        let symbols = data.symbols;
        let symbolFound = symbols.find(s => s.s.toLowerCase() === page.params.symbol.toLowerCase());

        if (!symbolFound) {
            return {
                status: 302,
                redirect: '/404'
            }
        }

        const url = `APIHOST/${symbolName}`;
        const res = await fetch(url);
        let stock = await res.json();
        stock = stock.data.attributes;

        props = {
            stock
        };

        return {
            props: {
                stock
            }
        }
    }
</script>

<svelte:head>
    <title>Stock: { symbolName || ''}</title>
</svelte:head>

<svelte:component this={StockSymbol} {...props}/>

search.svelte

<script context="module">
    import AutoComplete from "simple-svelte-autocomplete";
    import data from '../../../static/symbols.json';
    import { goto, prefetch } from '$app/navigation';

    var options = data;
    let selectedOption;

    const handleOnChange = () => {
        console.log(selectedOption);
        if (selectedOption) {
            goto(`/stocks/${selectedOption.s.toLowerCase()}`, {replaceState: true});
        }
    }
</script>

<div class="min-w-0 hidden sm:block flex-1 md:px-8 lg:px-48 xl:col-span-6">
    <div class="flex items-center px-6 py-4 md:max-w-3xl md:mx-auto lg:max-w-none lg:mx-0 xl:px-0">
        <div class="w-full">
            <label for="search" class="sr-only">Search</label>
            <div class="relative">
                <div class="z-20 pointer-events-none absolute inset-y-1 left-0 pl-3 flex items-center">
                    <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
                    </svg>
                </div>
                <AutoComplete 
                    onChange={handleOnChange}
                    inputId="search" 
                    placeholder="Search" 
                    className="w-full text-md"
                    inputClassName="block px-10 py-2 w-full rounded-md border border-gray-300 text-sm placeholder-gray-500 focus:outline-none focus:text-gray-900 focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" 
                    items={data.symbols.map(o => o)} 
                    labelFunction={o => o.s + '. ' + o.n}
                    bind:selectedItem={selectedOption} 
                    hideArrow={true}
                    showClear={true}
                    showLoadingIndicator={true}
                    noResultsText="No Results Found"
                    maxItemsToShowInList="10"
                    localFiltering=false 
                />
            </div>
        </div>
    </div>
</div>

svelte.config.js

import vercel from '@sveltejs/adapter-vercel';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        target: '#app',
        adapter: vercel(),
        hydrate: true,
        vite: {
            build: {
                minify: true,
                brotliSize: true,
                sourcemap: true,
            }
        }
    }
};

export default config;

请帮帮我。谢谢。

Answer 1

您在模块脚本中声明 props 并在 load 函数中分配它。这只适用于第一次。 slim explicitely states in its docs模块脚本中的变量更新不是 react 性的。解决的方法是显式声明 Prop (首选方式)或使用 $$restProps :

<script context="module">
    //...
    // Do NOT declare "let props" here

    export async function load({ page, fetch }) {
        // ..

        return {
            props: {
                stock // <- handed to the instance script
            }
        }
    }
</script>

<script>
    export let stock; // <- this gets the stock from "return { props: { stock } }" above
</script>
..
<svelte:component this={StockSymbol} {stock}/>
<!-- or (then you don't need the "export let stock" abive) -->
<svelte:component this={StockSymbol} {...$$restProps}/>