在SvelteKit中提交表单后,无法阻止页面重新加载(使用use:enhance和表单动作时)

编程语言 2026-07-09

我在一个SvelteKit项目中使用表单动作。我想提交一个表单,但之后不想让页面重新加载。出于某种原因,常见的解决方案(使用use:enhance和 update({ reset: false }))对我来说并不管用。

有一点可能相关:当我提交表单且没有改变表单字段的值时,服务器端的表单动作能正常运行,页面也不会重新加载(这是期望的行为)。只有当我改变表单字段的值后再提交表单,表单动作才会运行,随后页面重新加载(这是不正确的行为)。

以下是客户端代码:

<form
    method="POST"
    action="?/updateThings"
    use:enhance={() => {
        return async ({ update }) => {
            await update({ reset: false });
    }
    }}
>
    <input type="text" name="thingsJsonString" bind:value={thingsJsonString}>
    <button>Submit</button>
</form>

以及服务器端表单动作代码:

export const actions = {
    updateThings: async ({ request }) => {
        try {
            const data = await request.formData();

            if (thingsJsonStringFormValue === null) return { success: false };
            const thingsJsonString = thingsJsonStringFormValue.toString();
            const things = JSON.parse(thingsJsonString) as ThingInfo[];

            for (const thing of things) {
                const thingEntity = await db.thing.findOne(thing.id);
                if (thingEntity) thingEntity.infoString = JSON.stringify(thing);
            }

            await db.em.flush();

            return { success: true };
        } catch (err) {
            return fail(500, { error: (err as Error).message });
        }
} satisfies Actions;

在 @ssd的反馈之后,我还要补充一件事:从服务器端代码中移除 await db.em.flush() 这一行也能解决问题。(该项目使用MikroORM,这是提交事务的步骤。)

所以回顾一下:

  1. 当我在客户端修改表单字段的值并保留服务器端的数据库flush行,然后提交表单时,页面会错误地重新加载。
  2. 当我保持表单字段不变,或移除数据库flush行再提交表单时,页面则不会重新加载。

解决方案

好吧,我找到了答案。这与SvelteKit的表单提交或获取逻辑几乎没有关系。相反,我在应用里使用了SQLite数据库,而数据库文件就放在SvelteKit的仓库中。因此,只要在请求期间更新数据库,开发服务器就会重新加载,因为它把数据库文件当成了依赖项。

这是我的错,也对不起打扰各位,结果和我的问题几乎无关!感谢你的帮助!

站内所有文章版权归属LeftHeroAI导航站,无授权禁止任何主体转载、抄袭、复制内容,亦不得私自架设镜像站点。一经侵权,本站将通过法律途径追责。

相关文章