SvelteKit - 初始渲染后 API 响应数据 (PageData) 未更新

Question

一般来说，我对 svelte 和 svelteKit 很陌生，我正在尝试从 api 加载数据，并且我遵循了 sveltekit todo 示例代码。它对于初始渲染和a标记 onClick 运行良好，但在 div 中on:click更新 url 参数 api 被调用并返回数据，但PageData对象未更新。

这里我附上了我的onClick

import { goto } from '$app/navigation'; 
const adhigaramClick = (adhigaram: string) => {
        selectedAdhigaram = adhigaram
        $page.url.searchParams.set('adhigaram',adhigaram); 
        goto(`?${$page.url.searchParams.toString()}`);
    }

这里我附上了 api 调用 ( +page.server.ts)

    export const load: PageServerLoad = async ({url, params}) => {
    let selectedPaal = "test;

    const paramPaal =url.searchParams.get("paal")
    const adhigaram =url.searchParams.get("adhigaram")

        if (paramPaal) {
            selectedPaal = paramPaal;
        }
        
    const response = await api('GET', `page/${selectedPaal}${adhigaram?`/${adhigaram}` : ''}`);
    
    if (response.status === 404) {
        return {
            data: {}  as Page
        };
    }

    if (response.status === 200) {  
        return {
            ... (await response.json()) as Data
        };
    }
    throw error(response.status);
};

+page.svelte.ts文件获取响应数据( PageData)

import type { PageData } from './$types';

    export let data: PageData;
    $: console.log(data);

a标签点击工作正常页面重新渲染

<a href={`?paal=${paal.keyword}`} >
    {paal.titleTamil}
</a>

Answer 1

无效可能就是您所需要的。

\n

\n

SvelteKit 跟踪每个函数的依赖关系load，以避免在导航过程中不必要地重新运行它。例如，当您从一个页面导航到另一个页面时load，\n根目录中的函数+layout.js不需要重新运行，除非它引用url或\n成员params自上次导航以来发生更改

\n

Aload将在以下情况下重新运行：

\n

\n
• 它引用了一个属性params它引用了其值已更改
\n
• 它引用的属性url（例如url.pathname或url.search它引用了值已更改的
\n
• 它打电话await parent()给父母load并重新运行
\n
• fetch它通过或声明了对特定 URL 的依赖depends，并且该 URL 被标记为无效invalidate(url)
\n
• 所有活动负载功能均强制重新运行invalidate()
\n

\n

如果load触发函数重新运行，页面将不会重新挂载 \xe2\x80\x94，而是会使用新的data. 这意味着组件的内部状态被保留。如果这不是您想要的，您可以在回调中重置您需要重置的任何内容afterNavigate，和/或将组件包装在{#key ...}块中。

\n

\n

https://kit.svelte.dev/docs/load#invalidation

\n