SvelteKit模态框表单重置问题：提交成功后状态异常

方法1：在use:enhance回调内处理提交状态，不依赖$page.form.success #

放弃通过$page.form.success控制reserveSent，转而在表单提交回调里直接判断请求结果，完全摆脱页面缓存的form状态影响：

<script>
  import { createEventDispatcher } from 'svelte';
  let reserveSent = false;
  const dispatch = createEventDispatcher();

  const handleSubmit = async ({ form, action }) => {
    const response = await fetch(action, {
      method: 'POST',
      body: new FormData(form)
    });

    if (response.ok) {
      reserveSent = true;
    }
    // 返回处理后的响应，维持use:enhance的默认行为
    return await response.json();
  };

  const closeModal = () => {
    reserveSent = false;
    dispatch("close");
  };
</script>

<form method="POST" use:enhance={handleSubmit}>
  <!-- 表单输入项 -->
  <button type="submit">提交</button>
</form>

{#if reserveSent}
  <div>感谢您的提交！</div>
{/if}

<button on:click={closeModal}>关闭</button>

方法2：监听模态框打开状态，强制重置reserveSent #

如果要保留依赖$page.form.success的逻辑，可以通过监听模态框的显示状态，在每次打开时强制将reserveSent设为false：

假设父组件通过isOpen控制模态框显示，子组件接收该参数：

<script>
  import { createEventDispatcher } from 'svelte';
  export let isOpen = false;
  let reserveSent = false;
  const dispatch = createEventDispatcher();

  // 模态框打开时重置状态
  $: if (isOpen) {
    reserveSent = false;
  }

  // 原有的成功状态判断
  $: if($page.form?.success){
    reserveSent = true;
  }

  const closeModal = () => {
    reserveSent = false;
    dispatch("close");
  };
</script>

{#if isOpen}
  <div class="modal">
    <form method="POST" use:enhance>
      <!-- 表单内容 -->
    </form>
    {#if reserveSent}
      <div>感谢您的提交！</div>
    {/if}
    <button on:click={closeModal}>关闭</button>
  </div>
{/if}

问题根源 #

$page.form.success是服务器返回的页面状态数据，use:enhance只会更新页面需要的部分数据，不会自动重置之前的success标记。只要页面未重载，这个状态就会持续保留，导致模态框重新打开时，反应式语句再次触发，将reserveSent设为true。

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