Svelte修改数组类型Writable后UI未正确更新问题排查求助

根因 #

UI删除项显示异常和嵌套Writable写法没有直接关联，核心问题是{#each}循环未指定唯一key：
Svelte的each默认使用数组索引匹配节点与数据，当删除中间项时，Svelte只会判定最后一个索引对应的节点被移除，前面的节点会复用并刷新内容，如果子组件未正确响应props更新、或者存在未同步的内部状态，就会出现总是删除最后一行的表现。刷新后数据重新拉取渲染，所以显示正常。

修复操作 #

1. 给each块添加唯一标识 #

假设你的CrewMember类型存在唯一id字段，将模板中的循环代码修改为：

{#each $members as member (get(member).id)}
    <CrewMemberListItem
        {member}
        {pushToBuffer}
        deleteFunction={deleteMember}
    />
{/each}

括号内的(get(member).id)会告诉Svelte使用成员ID作为节点的唯一匹配依据，删除时会精准定位对应节点移除，不会出现显示错位的问题。如果是通过引用匹配，也可以直接写(member)作为key，只要能保证每一项唯一即可。

2. 可选优化项 #

你提到的Writable<Writable<CrewMember>[]>嵌套写法确实不必要，会增加状态管理的复杂度，你可以根据业务场景调整为外层存储普通CrewMember数组，单个成员的更新直接通过数组的update方法操作即可，若确实需要单独订阅单个成员的变更，保留现有写法也不会影响功能正常运行。

修改完成后删除选中项，UI即可同步更新正确，无需刷新页面。

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