Svelte多层插槽更新Store后渲染异常问题求助

问题描述 #

我是Svelte新手，正在开发可复用通用组件，组件层级为父组件A、通用子组件B、页面特定子组件C，通过插槽实现页面差异化内容展示。各页面使用不同的对象数组类型Store，并向下传递。

初始渲染正常，但点击添加按钮向Store中新增条目后，仅第一个组件项显示正确且绑定正常，其余所有项均显示Store中的最后一个对象，且绑定到该对象。点击日志按钮查看Store，数据是正确的，仅渲染出现异常。

相关代码 #

App.svelte #

<script>
  import A from './A.svelte'
  import B from './B.svelte'
  import C from './C.svelte'    
  import {myStore} from './mystore.js'
    
  function debug(){
    console.log("store", $myStore)
  } 
</script>

<A dataStore={myStore} >
    <B slot="b" let:p data={p.data} dataStore={myStore} >
        <C slot="c" let:p data={p.d} fn={p.fns} ></C>
    </B>
</A>

<div>
    <button on:click={debug} >log store</button>    
</div>

A.svelte #

<script>
    export let dataStore
</script>

<div>
    {#each $dataStore as d}
        <slot name="b" p={{data:d}} />
    {/each}
</div>

<style>
    div{
        border:1px solid blue;
        margin:3px
    }
</style>

B.svelte #

<script>
    export let data
    export let dataStore

    function add(){
        let id = $dataStore.length + 1
        let name = numberToWord(id)
        $dataStore = [{name, id}, ...$dataStore]
    }
    
    function numberToWord(number){return new String(number)}
    
    const p = {d:{data}, fns:{add}}
</script>

<div>
    <h1>
        {data.id}/{$dataStore.length}
    </h1>

    <slot name="c" p={p} />
</div>

<style>
    div{
        border:1px solid black;
        margin:3px  
    }
</style>

C.svelte #

<script>
    export let data 
    export let fn
</script>

<div>
    <input bind:value="{data.data.name}" />

    {#if data.data.id == 1 }
        <button on:click={fn.add}>Add Next</button>
    {/if}   
</div>

<style>
    div{
        border:1px solid red;
        margin:3px
    }
</style>

mystore.js #

import {writable} from 'svelte/store';

export const myStore = writable([{name:'one',id:1},{name:'two',id:2}])

问题原因与解决方案 #

核心原因 #

1. {#each}循环缺少唯一Key：A组件中的{#each $dataStore as d}未指定唯一标识，当Store数组新增元素并改变顺序时，Svelte的DOM diff算法会错误复用现有组件实例，导致组件的data属性无法正确关联到对应的数组项。
2. 非响应式的常量p：B组件中const p = {d:{data}, fns:{add}}仅在组件初始化时赋值一次，后续data响应式更新时，p.d.data不会同步更新，始终保留初始化时的对象引用。

修复步骤 #

1. 给{#each}添加唯一Key（修改A.svelte）

将循环代码修改为：

{#each $dataStore as d (d.id)}
    <slot name="b" p={{data:d}} />
{/each}

通过(d.id)指定唯一Key，确保Svelte能精准识别每个数组项，正确创建或复用组件，避免数据关联错误。

2. 将p改为响应式变量（修改B.svelte）

把常量声明替换为响应式声明：

$: p = {d:{data}, fns:{add}}

$:是Svelte的响应式标记，当data变化时会自动重新计算p的值，确保p.d.data始终指向最新的data对象，让C组件的绑定保持同步。

验证效果 #

修改完成后，新增Store条目时，所有组件项都会正确展示对应的数据，输入框的绑定也会正常工作，点击日志按钮可确认Store数据与组件展示一致。

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