Svelte中使用svelte:self操作嵌套JSON时新增低层节点丢失问题

你出现嵌套层级新增条目丢失的核心原因是单向数据流处理错误，所有递归层级共用的数据源没有统一维护，子层级的修改都存在本地副本中，父级更新就会被覆盖：

• 没有声明files为组件入参prop，递归调用svelte:self时子组件没法正确拿到父级传递的嵌套文件数组
• 新增操作直接修改当前组件的本地files变量，没有同步到最顶层的数据源，顶层数据更新后子层级的本地修改直接被重置
• {#each}遍历没有指定唯一key，Svelte无法正确追踪列表节点状态，容易出现渲染异常

采用双向绑定prop的方式统一维护同源数据，所有层级修改都会同步到顶层数据源，修复后的完整代码如下：

<script>
// 声明files为入参prop，父级递归调用时可以传递嵌套数组
export let files = [
  {
    name: 'entry 1',
    files: [
      { 
        name: 'nested entry' 
      }
    ]
  },        
  { 
    name: 'entry 2' 
  }
];

function add() {
  // 这里修改的是绑定后的同源数据，会同步到所有上层组件
  files = files.concat({name: 'new item'})
}
</script>

<ul>
<!-- 加唯一key，保证列表更新时状态正确，生产环境建议用唯一ID替代name作为key -->
{#each files as file (file.name)}
<li>
  {file.name}
  {#if file.files}
    <!-- 双向绑定files属性，子层级的修改会同步到当前file.files -->
    <svelte:self bind:files={file.files}/>
  {/if}
</li>
{/each}
<li>
  <button on:click={() => add()}>new</button>
</li>
</ul>

内容的提问来源于stack exchange，提问作者sean-halpin