为什么 +page.server.ts 执行加载函数后 +page.svelte 没有重新加载？

美好的一天/晚上！我已经处理这个问题几天了，移动各个部分以尝试隔离并解决问题。我很感激您在这里提供的任何见解。

以下是发生的事情的顺序：

1. +page.server.ts：初始负载按预期工作
2. +page.svelte:data:PageData已正确填充
3. +page.server.ts：Action按预期执行并工作
4. +page.server.ts：再次加载新数据
5. +page.svelte: 根本不重新加载

这是我的预期：

-+page.svelte重新加载，因为page.server.ts返回了新数据

分析：

- 起初，我认为可能hooks.server.ts是我的问题造成的，所以我删除了这些功能，但问题仍然存在。

- 似乎不需要invalidate任何东西，因为表单update正在工作并且page.server.ts正在按预期重新加载。

+页面.server.ts：

// src/routes/admin/manage-roles/+page.server.ts

// (...) import statements all working: db, schemas, types, etc...

export const load: PageServerLoad = async ({ locals }) => {
    try {
        const allRoles = await db.select().from(roles)
        return {
            allRoles
        };
    } catch (error) {
        console.error("Error fetching roles:", error);
        return fail(500, { error: error.message });
    }
};

export const actions: Actions = {
    new: async ({ request }) => {
        const form = await superValidate(request, roleSchema);
        if (!form.valid) {
            return fail(400, {
                form
            });
        }
        try {
            const id = uuidv4();
            const result = await db.insert(roles).values({
                id,
                name: form?.data?.name
            });
        } catch (error) {
            console.error("Error creating role:", error);
            return fail(500, { error: error.message });
        }

        return { success: true };
    }
};

+页面.svelte：

<script lang="ts">

// (...) import statements all working: db, schemas, components, etc...

    export let data: PageData;

    const { allRoles } = data;
    const roleStore = writable(allRoles);

    console.log("allRoles?", allRoles);

    const isNewDialogOpen = writable(false);
    const isSubmittingForm = writable(false);

    const table = createTable(roleStore, {
        sort: addSortBy({ disableMultiSort: true }),
        page: addPagination(),
        filter: addTableFilter({
            fn: ({ filterValue, value }) => value.includes(filterValue)
        }),
        select: addSelectedRows(),
        hide: addHiddenColumns()
    });

// (...) custom table control events, etc... all working.

</script>

<!-- New Role Dialog -->
<Dialog
    isOpen={$isNewDialogOpen}
    onOpenChange={(open) => {
        $isNewDialogOpen = open;
    }}
    title="New Role"
    description="Add a new role to assign to users.">
    <div slot="body">
        <Form
            action="?/new"
            onBeforeSubmit={() => ($isSubmittingForm = true)}
            on:successAfterUpdate={async () => {
                $isSubmittingForm = false;
                $isNewDialogOpen = false;
            }}>
            <div class="grid gap-2">
                <div class="grid gap-1">
                    <Label class="sr-only" for="name">Role Name</Label>
                    <Input id="name" name="name" placeholder="Admin" required />
                </div>
                <div class="flex w-full justify-end">
                    <Button type="submit" class="w-32" disabled={$isSubmittingForm}>Create Role</Button>
                </div>
            </div>
        </Form>
    </div>
    <div slot="footer" />
</Dialog>

<!-- Roles -->
<div class="flex flex-col px-10">
    <div class="flex-1 mb-6">
        <div class="flex items-center justify-between mb-2">
            <h2 class="text-2xl font-bold tracking-tight mb-4">
                <Users class="header-icon" />Manage Roles
            </h2>
            <div class="flex items-center space-x-2">
                <Button size="sm" on:click={() => ($isNewDialogOpen = true)}>
                    <Plus class="mr-2 h-4 w-4" />
                    New
                </Button>
            </div>
        </div>
        <ManageNav active="roles" />
    </div>

<!-- (...) The rest of the table/UI -->

钩子.server.ts：

import { auth } from "$lib/server/lucia";
import type { Handle, HandleServerError } from "@sveltejs/kit";

export const handleError: HandleServerError = async ({ error, event }) => {
    const errorId = crypto.randomUUID();
    event.locals.error = error?.toString() || undefined;
    event.locals.errorStackTrace = error?.stack || undefined;
    event.locals.errorId = errorId;
    console.error(`Error ID: ${errorId}`, error)

    return {
        message: "An unexpected error occurred.",
        errorId
    };
};

export const handle: Handle = async ({ event, resolve }) => {
    event.locals.auth = auth.handleRequest(event)
    return await resolve(event)
};

感谢您花时间考虑我的情况。我想这里所有的集体努力都会对那些在这种情况下/未来与人工智能聊天的人有益。

祝大家度过美好的一天。干杯!

🎩🌹⚡️✨

解决方案和更新：

我了解到一切依赖的东西都data必须是反应性的，现在一切都进展顺利。（见下面的答案）。

export let data: PageData;
const roleStore = writable([]);

$: if (data?.allRoles) roleStore.set(data.allRoles);