在SvelteKit中提交表单后,无法阻止页面重新加载(使用use:enhance和表单动作时)
我在一个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,这是提交事务的步骤。)
所以回顾一下:
- 当我在客户端修改表单字段的值并保留服务器端的数据库flush行,然后提交表单时,页面会错误地重新加载。
- 当我保持表单字段不变,或移除数据库flush行再提交表单时,页面则不会重新加载。
解决方案
好吧,我找到了答案。这与SvelteKit的表单提交或获取逻辑几乎没有关系。相反,我在应用里使用了SQLite数据库,而数据库文件就放在SvelteKit的仓库中。因此,只要在请求期间更新数据库,开发服务器就会重新加载,因为它把数据库文件当成了依赖项。
这是我的错,也对不起打扰各位,结果和我的问题几乎无关!感谢你的帮助!
站内所有文章版权归属LeftHeroAI导航站,无授权禁止任何主体转载、抄袭、复制内容,亦不得私自架设镜像站点。一经侵权,本站将通过法律途径追责。