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

【问题标题】：Nested component error: {#each} only iterates over array-like on drop嵌套组件错误：{#each} 仅在放置时像数组一样迭代
【发布时间】：2021-02-16 12:46:02
【问题描述】：

我正在尝试使用此对象创建一个使用嵌套拖放从sevelte-dnd-action 的组件：

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

我首先在 app.svelte 调用它，并将对象内部的数组传递给 Horizontal.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

【问题讨论】：

标签： javascript svelte-3 svelte-component

【解决方案1】：

问题的原因是use:dndzone={{items: objectArray, type: 'define name'}} 中缺少键“type”。这是更正代码的链接REPL

【讨论】：