SvelteKit中use:enhance导致文本输入框无法回显表单值

问题场景 #

在SvelteKit的编辑表单中：

• 页面合并初始data（来自+page.server.js的load）和提交后返回的form（来自actions），传入RecordForm组件
• 首次加载所有字段正常填充；提交表单出现错误时，服务器返回的formData中包含正确的title值，但text类型输入框无法显示该值，而同位置的div用相同表达式formData?.data?.title能正常渲染
• 移除use:enhance指令后，输入框恢复正常显示；number类型输入框不受影响

相关代码片段：
父页面代码：

<script>
    import RecordForm from "../../../components/forms/RecordForm.svelte";

    /* +page.server.js中load函数返回的数据 */
    export let data;

    /* +page.server.js中actions函数返回的数据 */
    export let form;

</script>

<RecordForm mode="edit" formData={ {...data, ...form} }/>

有问题的text输入框代码：

<!-- Title -->
<div class="basis-1/2 form-control w-full">
    <label class="label">
        <span class="label-text">Title <span class="required-field">*</span></span>
    </label>
    <div>HERE {formData?.data?.title}</div>
    <input
            name="title"
            id="title"
            type="text"
            value={ formData?.data?.title || "" }
            class="input input-bordered w-full max-w-xs"/>

    <label for="title" class="label">
        {#if formData?.errors?.title}
            <span class="label-text-alt text-error">{ formData?.errors?.title[0]}</span>
        {/if}
    </label>
</div>

服务器返回的form数据：

{
  data: {
    barcode: '101010101010111',
    title: 'Test Record',
    original_release_year: '2008',
    original_release_date: '',
    reissue_release_date: ''
  }
}

原因分析 #

use:enhance的核心作用是优化表单提交体验（无刷新更新页面），默认会保留用户提交前的输入状态，避免页面"跳闪"或丢失输入。但在提交错误的场景下，这个机制会覆盖输入框的value绑定：

• 服务器返回的formData已经更新了组件的状态，所以div能正常渲染最新值
• 但use:enhance会将text类型输入框的DOM值重置为用户提交前的内容（或内部追踪的状态），导致单向绑定的value表达式被忽略
• number类型输入框不受影响，是因为Svelte对数值类型的输入绑定优先级更高，不会被use:enhance的状态覆盖

解决办法 #

方法1：改用双向绑定 #

将单向的value绑定改为bind:value，让输入框的状态和组件数据完全同步，绕过use:enhance的状态拦截：

<input
        name="title"
        id="title"
        type="text"
        bind:value={formData.data.title}
        class="input input-bordered w-full max-w-xs"/>

注意：确保formData.data.title有默认值（比如空字符串），避免出现undefined导致绑定异常

方法2：自定义use:enhance回调，强制同步数据 #

如果必须使用单向绑定，可在use:enhance的回调中，手动将服务器返回的同步到输入框：

<script>
    import { enhance } from '$app/forms';
    export let formData;

    function syncFormAfterSubmit() {
        return async ({ update }) => {
            const result = await update();
            // 提交完成后，手动更新输入框DOM值
            document.getElementById('title').value = formData.data.title || "";
            return result;
        };
    }
</script>

<form use:enhance={syncFormAfterSubmit}>
    <!-- 表单内容 -->
</form>

方法3：禁用use:enhance的状态保留（不推荐） #

如果不需要保留用户提交前的输入，可在回调中重置表单状态，但这会丢失use:enhance的无刷新体验优势：

function resetFormOnSubmit() {
    return async ({ update, form }) => {
        const result = await update();
        form.reset();
        return result;
    };
}

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