Svelte中select选项更新后绑定失效问题排查与解决

问题原因 #

Svelte的bind:value在绑定对象类型的值时，是通过引用相等性来匹配选项的。初始渲染时，selected会自动指向questions数组里的唯一对象（两者引用同一个内存地址）；但5秒后你直接替换了整个questions数组，新数组里的对象虽然结构、内容和原对象完全一致，但它是一个全新的内存引用，和selected原来指向的对象不是同一个，因此Svelte无法在新的选项列表中找到匹配项，绑定自然失效。

修复方案 #

方案1：绑定对象的唯一标识（推荐） #

不要直接绑定整个对象，而是绑定对象的唯一属性（比如id），这样只要标识一致，不管对象引用怎么变，都能正确匹配。

修改后的代码：

<script>
    let questions = [{ id: 1, text: `Where did you go to school?` }]
    setTimeout(() => questions = [{ id: 1, text: `Where did you go to school?` }], 5000)
    let selected; // 现在存储的是id值
</script>

<select bind:value={selected}>
    {#each questions as question}
        <option value={question.id}>
            {question.text}
        </option>
    {/each}
</select>

如果之后需要用到完整的对象，可以通过questions.find(q => q.id === selected)来获取。

方案2：保留原数组/对象引用 #

如果必须绑定整个对象，可以选择以下两种方式：

方式A：修改原数组元素（保持数组引用不变）

<script>
    let questions = [{ id: 1, text: `Where did you go to school?` }]
    setTimeout(() => {
        // 不替换整个数组，只修改元素内容
        questions[0] = { id: 1, text: `Where did you go to school?` };
        // 也可以用splice触发响应式更新
        // questions.splice(0, 1, { id: 1, text: `Where did you go to school?` });
    }, 5000)
    let selected;
</script>

<select bind:value={selected}>
    {#each questions as question}
        <option value={question}>
            {question.text}
        </option>
    {/each}
</select>

方式B：同步更新selected指向新对象

如果一定要替换整个数组，更新时把selected指向新数组里的对应对象：

<script>
    let questions = [{ id: 1, text: `Where did you go to school?` }]
    let selected;

    setTimeout(() => {
        const newQuestions = [{ id: 1, text: `Where did you go to school?` }];
        questions = newQuestions;
        // 同步更新selected指向新对象
        selected = newQuestions[0];
    }, 5000)
</script>

<select bind:value={selected}>
    {#each questions as question}
        <option value={question}>
            {question.text}
        </option>
    {/each}
</select>

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