嵌套的组件错误：{＃each}仅在放置时像数组一样迭代

问题描述

我正在尝试使用以下对象创建使用sevelte-dnd-action中的嵌套拖放的组件：

$forms = [
  {
    id: hexID(),title: 'Data - test',defined: true,components: [
      {
        id: hexID(),type: 'text',size: 'long',placeholder: 'None'
      },{
        id: hexID(),size: 'normal',placeholder: 'Test'
      },placeholder: 'CCC'
      },placeholder: 'CDS'
      }
    ]
  },{
    id: hexID(),title: 'Emails',placeholder: 'RGzzzz'
      },type: 'select',placeholder: 'RGrrr'
      }
    ]
  },title: 'Tel',placeholder: 'RaaaG'
      },placeholder: 'Rtrea'
      }
    ]
  }
]

我首先在app.svelte上调用它，然后将对象内部的数组传递给Horizo​​ntal.svelte组件：

<section class='create_form_body'
   use:dndzone={{items:$forms}}
   on:consider={handleDndConsider}
   on:finalize={handleDndFinalize}>
{#each $forms as form (form.id)}
  <HorizontalList {form}/>
{/each}

这是水平组件：

<script>
 export let form
 function handleDndConsider(cid,e) {
    let chosenOne = $forms.findIndex(x => x.id === cid)
    $forms[chosenOne].components = e.detail.items;
    $forms = [...$forms]
 }
 
function handleDndFinalize(cid,e) {
    let idx = $forms.findIndex(x => x.id === cid)
    $forms[idx].components = e.detail.items;
    $forms = [...$forms]
}
</script>

<div class='form_box'>
<div class='form_header'>
 {form.title}
<div class='form_header_combo'>
  <span>title</span>
</div>
</div>
    <section class='input_list'
        use:dndzone={{items: form.components}}
        on:consider={(e) => handleDndConsider(form.id,e)}
        on:finalize={(e) => handleDndFinalize(form.id,e)}
    >           
        {#each form.components as component (component.id)}
                <ComponentGetter type={component}/>
        {/each}
    </section>
</div>

如果我删除所有的DIV并保留该部分的正常工作，但是使用div，它会提供error: {#each} only iterates over array-like objects.除了删除div之外，还有其他选择吗？ 这是REPL

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）