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

Question

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

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

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应该可以解决问题，但在路由之间交换时，页面似乎仍然不总是从服务器重新加载数据。

Answer 1

您以非反应方式更改本地状态：

let items = data.items

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

使它成为反应式可能会解决这个问题：

$: items = data.items

您还可以反应性地解构 props，这需要额外的括号：

$: ({ items } = data)

SvelteKit 文档介绍了这个问题。