SvelteKit绑定问题：departments变量被设为undefined

在SvelteKit项目的+page.svelte中遇到值绑定异常：

1. 页面加载后，data属性成功填充clients列表并渲染客户端选择下拉框；
2. 用户选择客户端时，触发API调用获取对应部门数据，填充部门选择下拉框；
3. 但用户选择部门后，departments变量被莫名设为undefined，导致部门下拉框消失；
4. 移除部门下拉框的bind:value后问题不再出现，调换bind:value与on:change顺序无效。

原代码 #

<script>
export let data

let clientValue = 0
let departmentValue = 0

$: ({ clients, departments } = data)

async function handleClientSelection(event) {
    const response = await fetch('/api/departments/' + event.target.value)
    departments = await response.json()
}
async function handleDepartmentSelection(event) {
    console.log('handleDepartmentSelection called and did something.')
}
</script>

<label for='client'>Client: 
<select name="client" bind:value={clientValue} on:change={handleClientSelection}>
    <option value="0" disabled>Select a client</option>
    {#each clients as client}
        <option value={client.id}>{client.title}</option>
    {/each}
</select>
</label>

{#if departments !== undefined && departments !== null}
<label for='department'>Department: 
<select name="department" bind:value={departmentValue} on:change={handleDepartmentSelection}>
    <option value="" disabled>Select a department</option>
    {#each departments as department}
        <option value={department.id}>{department.title}</option>
    {/each}
</select>
</label>
{/if}

核心原因 #

问题出在反应式解构语句：

$: ({ clients, departments } = data)

这条语句会在组件每次更新时（比如用户选择部门导致departmentValue变化）重新执行，将departments重置为data中的初始值（大概率是undefined），直接覆盖了API获取的部门数据。

解决方法 #

移除反应式解构，直接初始化clients和departments变量，后续单独维护departments的状态：

修改后的<script>部分：

<script>
export let data

let clientValue = 0
let departmentValue = 0

// 直接从data初始化，不再使用反应式语句
let clients = data.clients;
let departments = data.departments;

async function handleClientSelection(event) {
    const response = await fetch('/api/departments/' + event.target.value)
    departments = await response.json()
}
async function handleDepartmentSelection(event) {
    console.log('handleDepartmentSelection called and did something.')
}
</script>

这样修改后，departments只会在API调用时被更新，不会被组件更新时的反应式语句重置，部门下拉框就能正常保持显示。

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