SvelteKit跨路由调用Form Actions无法返回数据问题排查

问题场景 #

在SvelteKit项目中遇到如下问题：

• 通用表单组件/lib/MyForm.svelte通过enhance提交表单，目标是/routes/pageA/+page.server.ts中定义的myAction动作，该动作返回{ success: true, data: 'Result data' }
• 当MyForm组件在pageA页面中使用时，$page.form可正常读取服务端返回的数据
• 但将MyForm组件导入pageB页面使用时，尽管服务端和客户端的表单逻辑都正常执行，$page.form始终为null

解决方法 #

修改MyForm.svelte中的自定义SubmitFunction，在处理表单提交结果时，通过applyAction手动同步服务端返回的结果到当前路由状态，让$page.form能正确获取数据。修改后的代码如下：

<script lang="ts">
  import { enhance, applyAction } from '$app/forms';
  import { goto } from '$app/navigation';
  // 其他导入或变量定义...

  const mySubmitFunction: SubmitFunction = () => {
          console.log('Form Submitted');
          return async ({ update, result }) => {
              await update();
              if (result.type === 'redirect') {
                await goto(result.location)
              } else {
                await applyAction(result);
              }
              console.log('Server has responded');
              console.log($page?.form); // 现在可正确打印表单返回结果
          };
      };
</script>
<!-- 表单内容... -->

原理说明 #

跨路由提交表单时，默认的enhance流程不会自动把Form Action的返回结果同步到当前页面的$page状态中。调用applyAction可以手动处理服务端返回的结果，更新$page.form的值，从而在跨路由场景下也能正常读取表单提交后的响应数据。

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