SvelteKit删除含bind:this绑定的Store时出现undefined错误

问题描述 #

使用名为$columns的Store绑定HTML片段到属性，核心渲染代码如下：

{#each $columns[key].sections as section, i (section.id)}
    {#if $columns[key].sections[i].chapter}
        <div bind:this={$columns[key].sections[i].dom}>
                {@html section.chapter}
        </div>
    {/if} 
{/each}

执行列删除操作时触发undefined错误，最初删除逻辑为：

$columns = $columns.filter((el, index) => index !== key);

后续尝试手动清空DOM引用、等待tick()、延迟深拷贝过滤等调试逻辑后，错误仍存在，抛出的错误信息：

Column.svelte:47 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '1142') at Column.svelte:47:42 at flush (index.mjs:1320:35)

移除bind:this绑定可消除错误，但该绑定是业务必需，需要保留。

解决方案 #

1. 修正#each循环的引用逻辑 #

问题核心是循环中通过$columns[key].sections[i]访问元素，列被删除后$columns[key]变为undefined，但Svelte的响应式更新仍会尝试访问旧索引引用。改为直接使用循环变量section：

{#each $columns[key].sections as section (section.id)}
    {#if section.chapter}
        <div bind:this={section.dom}>
                {@html section.chapter}
        </div>
    {/if} 
{/each}

此修改避免了删除列后Svelte访问已不存在的数组索引。

2. 简化删除逻辑 #

无需手动操作DOM节点或清空引用，Svelte会自动处理DOM销毁，只需保证Store更新的不可变性：

function removeColumn() {
    // 直接生成新数组过滤目标列，触发响应式更新
    $columns = $columns.filter((_, index) => index !== key);
}

若担心内存泄漏，可在Section组件的销毁钩子中清空DOM引用：

import { onDestroy } from 'svelte';

onDestroy(() => {
    if (section.dom) {
        section.dom = null;
    }
});

3. 严格遵循Store不可变更新原则 #

Svelte Store依赖不可变更新触发响应式刷新，确保所有对$columns的修改都返回新数组，禁止直接修改原数组的属性或元素。

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