在同一动态路由中打开新页面时，SvelteKit 页面数据并不总是更新答案

【问题标题】：SvelteKit page data doesn't always update when opening new page in the same dynamic route在同一动态路由中打开新页面时，SvelteKit 页面数据并不总是更新
【发布时间】：2022-11-24 00:12:00
【问题描述】：

我有一个路由结构/items/[category]。当用户正在浏览 /items/category1 然后尝试转到同一路径中的另一个页面（例如 /items/category2）时，页面数据通常会更新以显示 category2 项目，但并非总是如此。有时浏览器中的 URL 会更新，但页面数据仍显示来自先前 URL 的项目。

我的 /items/[category] 的 +page.server.js 看起来像：

import { getItems } from '$lib/services/ItemService';
export const csr = false;
export const load = ({ locals, params }) => {
    return {
        items: getItems(locals, `category = "${params.itemCategory}"`)
    };
};

我的 +page.svelte 是：

<script>
   import { ItemCard } from '$lib/components';
   export let data
   let items = data.items
</script>

....

<div class="grid grid-cols-1 md:grid-cols-3 px-4 gap-6">   
   {#each items as item}
      <ItemCard {item}/>
   {/each}
</div>

getItems() 函数从 pocketbase 检索 JSON 数据并且工作正常。

我读到将 export const csr = false; 添加到 +page.server.js 应该可以解决问题，但在路由之间交换时，页面似乎并不总是从服务器重新加载数据。

【问题讨论】：

标签： svelte sveltekit

【解决方案1】：

您非反应性地更改本地状态：

let items = data.items

如果路由器更新data，则items不会。

使其具有反应性可能会解决问题：

$: items = data.items

【讨论】：