SvelteKit中use:enhance提交表单修改字段时页面异常重载

问题背景 #

在SvelteKit项目中使用Form Actions实现表单提交，目标是提交后不刷新页面，采用use:enhance配合update({ reset: false })的常规方案，但出现异常行为：

• 未修改表单字段值时提交：服务端Action正常执行，页面保持不刷新（符合预期）
• 修改字段值后提交：服务端Action执行完成后，页面自动重载（不符合预期）

客户端代码 #

<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>

服务端Form Action代码 #

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

            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(); // MikroORM事务提交步骤

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

关键现象总结 #

• 触发重载的场景：修改表单字段值 且 保留await db.em.flush()代码
• 正常不刷新的场景：未修改字段值，或 移除await db.em.flush()代码

临时验证方案 #

移除服务端代码中的await db.em.flush()可避免页面重载，但此操作会导致数据库事务无法提交，仅作为临时验证手段，不能用于生产环境。

可能的排查方向 #

1. 检查db.em.flush()执行后，是否触发了SvelteKit页面数据的重新验证逻辑（比如页面加载函数依赖了更新后的数据库数据，导致页面被强制重新渲染）
2. 确认use:enhance的回调函数是否存在未捕获的异常，或项目中是否有全局表单提交监听事件干扰默认行为
3. 验证MikroORM的flush操作是否导致服务端返回的响应异常（如状态码、响应头不符合SvelteKit的预期）

内容的提问来源于stack exchange，提问作者Grav