Svelte Kit中表单action抛出redirect后如何重置表单？

问题根源 #

1. 初始use:enhance函数里立刻调用form.reset()，会导致用户提交后立刻看到空白表单，直到请求完成，体验糟糕。
2. 回调里单独调用form.reset()+invalidateAll()+update()无效，是因为update()仅用于更新当前页面的现有数据，无法处理服务端303重定向后的页面数据刷新需求；而goto会触发完整导航流程，强制失效数据并加载目标页面，因此能生效。

正确实现方式 #

在use:enhance的回调函数中，等待请求完成后再重置表单，并结合重定向结果处理数据失效与页面更新：

<form
  method="POST"
  use:enhance={() => {
    return async ({ result, form, update }) => {
      // 服务端返回303重定向时的处理
      if (result.type === 'redirect') {
        // 请求完成后再重置表单，避免空白
        form.reset();
        // 失效所有数据，确保目标页面获取最新内容
        await invalidateAll();
        // 利用重定向地址导航，触发页面刷新
        await goto(result.location, { invalidateAll: true });
      } else {
        // 处理非重定向场景（如表单验证失败）
        update();
      }
    };
  }}
>
  <!-- 表单元素 -->
</form>

简化优化（利用SvelteKit原生重定向处理） #

如果重定向目标是当前页面，也可以省略goto，仅在回调中重置表单+失效数据+调用update()，因为use:enhance会自动处理重定向后的页面更新：

<form
  method="POST"
  use:enhance={() => {
    return async ({ result, form, update }) => {
      if (result.type === 'redirect') {
        form.reset();
        await invalidateAll();
      }
      // 无论是否重定向，调用update更新页面状态
      await update();
    };
  }}
>
  <!-- 表单元素 -->
</form>

另一种方案：用afterNavigate重置表单 #

如果希望分离表单重置逻辑，可以在页面组件中通过afterNavigate钩子处理，确保导航完成后重置表单：

<script>
  import { afterNavigate } from '$app/navigation';
  let formRef;

  afterNavigate(() => {
    if (formRef) formRef.reset();
  });
</script>

<form bind:this={formRef} method="POST" use:enhance>
  <!-- 表单元素 -->
</form>

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