Svelte组件StatePicker值无法存入数据库问题求助

你的问题出在StatePicker组件与Superforms的绑定逻辑上，其他字段正常是因为它们的表单控件正确设置了name属性并实现了双向绑定，而StatePicker缺少这两个关键配置：

1. 核心问题点 #

• StatePicker组件定义了name属性，但没有传递给内部的MaterialSelect，导致表单提交时，这个字段的标识不匹配Zod schema中的state，Superforms无法捕获到选中值。
• 没有使用Svelte的双向绑定（bind:value），选中的州值无法同步到父组件的form数据中。

2. 修复步骤 #

修改StatePicker.svelte #

调整组件代码，传递name属性并实现双向绑定：

<script lang="ts">
    import MaterialSelect from './MaterialSelect.svelte';

    export let invalid = '';
    export let value: string = '';
    export let label = 'State';
    export let name = 'state';
    export let id = 'state';
    export let placeholder = ' ';
    export let disabled = false;
    export let readonly = false;
    export let required = false;

    const STATES = [
        { state: 'Alabama', abbreviation: 'AL' },
        { state: 'Alaska', abbreviation: 'AK' },
        { state: 'Arizona', abbreviation: 'AZ' },
        { state: 'Arkansas', abbreviation: 'AR' },
        { state: 'California', abbreviation: 'CA' },
        { state: 'Colorado', abbreviation: 'CO' },
        { state: 'Connecticut', abbreviation: 'CT' },
        { state: 'Delaware', abbreviation: 'DE' },
        { state: 'Florida', abbreviation: 'FL' },
        { state: 'Georgia', abbreviation: 'GA' },
        { state: 'Hawaii', abbreviation: 'HI' },
        { state: 'Idaho', abbreviation: 'ID' },
        { state: 'Illinois', abbreviation: 'IL' },
        { state: 'Indiana', abbreviation: 'IN' },
        { state: 'Iowa', abbreviation: 'IA' },
        { state: 'Kansas', abbreviation: 'KS' },
        { state: 'Kentucky', abbreviation: 'KY' },
        { state: 'Louisiana', abbreviation: 'LA' },
        { state: 'Maine', abbreviation: 'ME' },
        { state: 'Maryland', abbreviation: 'MD' },
        { state: 'Massachusetts', abbreviation: 'MA' },
        { state: 'Michigan', abbreviation: 'MI' },
        { state: 'Minnesota', abbreviation: 'MN' },
        { state: 'Mississippi', abbreviation: 'MS' },
        { state: 'Missouri', abbreviation: 'MO' },
        { state: 'Montana', abbreviation: 'MT' },
        { state: 'Nebraska', abbreviation: 'NE' },
        { state: 'Nevada', abbreviation: 'NV' },
        { state: 'New Hampshire', abbreviation: 'NH' },
        { state: 'New Jersey', abbreviation: 'NJ' },
        { state: 'New Mexico', abbreviation: 'NM' },
        { state: 'New York', abbreviation: 'NY' },
        { state: 'North Carolina', abbreviation: 'NC' },
        { state: 'North Dakota', abbreviation: 'ND' },
        { state: 'Ohio', abbreviation: 'OH' },
        { state: 'Oklahoma', abbreviation: 'OK' },
        { state: 'Oregon', abbreviation: 'OR' },
        { state: 'Pennsylvania', abbreviation: 'PA' },
        { state: 'Rhode Island', abbreviation: 'RI' },
        { state: 'South Carolina', abbreviation: 'SC' },
        { state: 'South Dakota', abbreviation: 'SD' },
        { state: 'Tennessee', abbreviation: 'TN' },
        { state: 'Texas', abbreviation: 'TX' },
        { state: 'Utah', abbreviation: 'UT' },
        { state: 'Vermont', abbreviation: 'VT' },
        { state: 'Virginia', abbreviation: 'VA' },
        { state: 'Washington', abbreviation: 'WA' },
        { state: 'West Virginia', abbreviation: 'WV' },
        { state: 'Wisconsin', abbreviation: 'WI' },
        { state: 'Wyoming', abbreviation: 'WY' }
    ];
</script>

<!-- 传递name属性，并用bind:value实现双向绑定 -->
<MaterialSelect {label} {name} {id} {disabled} bind:value>
    {#each STATES as { state, abbreviation }}
        <option value={state}>{abbreviation}</option>
    {/each}
</MaterialSelect>

确保MaterialSelect组件正确处理属性 #

需要保证MaterialSelect内部渲染的<select>元素正确接收并应用name和value属性，核心代码示例：

<script lang="ts">
    export let label: string;
    export let name: string;
    export let id: string;
    export let disabled = false;
    export let value: string = '';
</script>

<div>
    <label for={id}>{label}</label>
    <!-- 关键：设置name属性，并用bind:value实现双向绑定 -->
    <select {id} {name} {disabled} bind:value>
        <slot />
    </select>
</div>

3. 验证修复 #

修改后提交表单时：

• 选中的州值会通过双向绑定同步到form的state字段
• Superforms能通过name="state"捕获到该值，通过Zod校验后存入数据库

内容的提问来源于stack exchange，提问作者Héctor Reynaga