SvelteKit use:enhance失效，提交表单触发整页刷新问题

我是SvelteKit新手，正在构建基于MongoDB的简易Todo应用。按照教程实现了添加Todo的表单，并且使用了use:enhance指令来阻止页面刷新，但每次提交表单都会触发整页刷新，导致动画无法正常工作。相关代码如下：

表单组件代码 #

<form
      action="?/create"
      method="POST"
      class="flex flex-col gap-5 justify-center items-center w-2/3 mx-auto"
      use:enhance
    >
      <div class="w-2/3">
        <label class="block text-sm text-gray-500" for="todo"> Title </label>
        <input
          class="border border-gray-300 w-full rounded-md shadow-sm hover:border-gray-400 focus:outline-none focus:border-gray-500 transition duration-100 ease-linear p-1 text-gray-700"
          type="text"
          name="title"
          bind:value={title}
        />
      </div>
      <div class="w-2/3">
        <label class="block text-sm text-gray-500" for="todo">
          Description
        </label>
        <textarea
          rows="4"
          class="w-full border border-gray-300 rounded-md shadow-sm hover:border-gray-400 focus:outline-none focus:border-gray-500 transition duration-100 ease-linear p-1 text-gray-700"
          name="desc"
          bind:value={desc}
        />
      </div>
      <div>
        <button
          class="bg-blue-500 text-white px-8 py-2 rounded-md font-semibold text-lg hover:bg-blue-600 transition duration-100 shadow-xl"
        >
          Create
        </button>
      </div>
    </form>

+page.server.js代码 #

export const actions = {
  create: async ({ cookies, request }) => {
    const data = await request.formData();
    if (data.get("title").length === 0) {
      return fail(400, {
        error: true,
        message: "Title can't be empty",
      });
    }
    if (data.get("desc").length === 0) {
      return fail(400, {
        error: true,
        message: "Description can't be empty",
      });
    }
    const todo = {
      title: data.get("title"),
      description: data.get("desc"),
    };
    try {
      await createTodo(todo);
    } catch (err) {
      return fail(422, {
        description: "wrong",
      });
    }
  },
};

问题原因分析 #

出现这个问题的常见原因包括：

• 未导入use:enhance指令：use:enhance是SvelteKit从$app/forms提供的内置指令，如果组件未导入，浏览器会执行默认的表单提交逻辑（整页刷新）。
• fail函数未正确导入：+page.server.js中使用的fail函数需要从@sveltejs/kit导入，缺失会导致错误，触发整页刷新。
• createTodo函数存在隐藏错误：如果createTodo执行时抛出的错误未被完全捕获，或者数据库连接异常，会导致流程中断，触发默认提交行为。
• 版本兼容性问题：旧版本的SvelteKit可能存在use:enhance的bug，导致指令失效。

解决方案 #

1. 导入use:enhance指令：在表单所在的Svelte组件顶部添加导入语句：

   import { enhance } from '$app/forms';
   

2. 导入fail函数：在+page.server.js顶部添加：

   import { fail } from '@sveltejs/kit';
   

3. 排查createTodo函数：确认createTodo能正常连接MongoDB、插入数据，没有未捕获的错误。可以在catch块中打印错误信息，排查具体问题：

   catch (err) {
     console.error(err);
     return fail(422, {
       description: "wrong",
     });
   }
   

4. 自定义enhance逻辑（可选）：添加提交后的状态重置和页面更新逻辑，确保交互流畅：

   <form
     action="?/create"
     method="POST"
     class="flex flex-col gap-5 justify-center items-center w-2/3 mx-auto"
     use:enhance={({ cancel }) => {
       return async ({ result, update }) => {
         if (result.type === 'success') {
           title = '';
           desc = '';
           await update();
         }
       };
     }}
   >
   

5. 更新SvelteKit版本：运行命令升级到最新稳定版：

   npm upgrade @sveltejs/kit
   

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