如何避免SvelteKit中Superforms更新时覆盖输入框内容？

核心原因 #

问题出在服务器端返回form.data.message = ""，Superforms在表单动作完成后会自动同步服务器端的表单状态到客户端，这会直接覆盖用户在等待AI回复期间输入的内容。尽管客户端提交时清空了$form.message，但服务器返回的空值仍会再次覆盖当前输入。

解决方案 #

步骤1：移除服务器端的清空操作 #

在+page.server.ts的action中，删除form.data.message = ""这行代码。输入框的清空逻辑交由客户端处理，服务器无需干预。

修改后的+page.server.ts action部分：

export const actions: Actions = {
  default: async ({ request }) => {
    const form = await superValidate(request, schema);

    if (!form.valid) return fail(400, { form });

    messages.push(form.data.message);
    await new Promise((resolve) => setTimeout(resolve, 1000));
    messages.push('This is a response');

    // 移除服务器端清空message的代码
    return {
      form,
      messages
    };
  }
};

步骤2：客户端保留用户输入，避免被服务器状态覆盖 #

在客户端的superForm配置中添加onUpdate钩子，当服务器返回表单状态时，保留用户当前输入的message值，不被服务器返回的旧值覆盖。

修改后的+page.svelte脚本部分：

<script lang="ts">
  import { superForm } from 'sveltekit-superforms/client';

  export let data;

  const { form, enhance } = superForm(data.form, {
    onSubmit: () => {
      data.messages = [
        ...data.messages,
        $form.message,
        "..."
      ];
      // 提交时清空输入框
      $form.message = "";
    },
    // 自定义表单更新逻辑，保留用户当前输入的message
    onUpdate: ({ form: serverForm }) => {
      return {
        ...serverForm,
        data: {
          ...serverForm.data,
          message: $form.message
        }
      };
    }
  });
</script>

原理说明 #

• 服务器不再修改form.data.message，返回的表单状态中message为用户提交的旧值，不会是空值。
• 通过onUpdate钩子，将服务器返回的表单状态与客户端当前的message值合并，确保用户在等待期间输入的新内容不会被服务器的旧值覆盖。
• 客户端提交时的$form.message = ""依然有效，保证提交后输入框清空，用户可立即输入新内容。

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