数组元素在控制台日志中是正确的，但呈现不正确答案

【问题标题】：Array elements are correct in console logs but not rendered correct数组元素在控制台日志中是正确的，但呈现不正确
【发布时间】：2020-06-15 03:24:48
【问题描述】：

我正在尝试将组件分成选定的数组，而不是选定的数组，以便与前一个数组分开。但是当数组的第一项被选中时，它被复制而不是添加到另一个数组——至少在屏幕上。但是在控制台日志中，数组是应有的。

我在调试时发现了这个错误，但我不知道如何解决这个问题。

异常：错误：：除非在刷新时使用 Cards.get data [as data] at Cards.invokeGetter (:1:142) 处的“访问器：true”或“”编译，否则无法直接从组件实例中读取道具

this is the repl of the problem

<section class="_residencial_cards">
{#if compareList.length > 0}
  <div class="test">
    <h1>comparar</h1>
    {#each compareList as item}
        <Card card={item} on:mark={changeList(item)}/>
    {/each}
  </div>
{/if}
{#each initialCards.filter(c => c.compare === false) as card}
    <Card {card} on:mark={changeList(card)}/>
{/each}
</section>

这是划分数组的函数：

function changeList(card) {
 compareList = [...compareList, card]
 card.compare = true
 initialCards = initialCards.filter(t => t !== card)
}

组件卡：

<label for="{frontprops.name}">Compare</label>
<input type="checkbox" id='{frontprops.name}' name="" on:change={change} >

及其派发代码：

function change(event) {
  check = event.target.checked
  dispatch('mark', {
    bool: check
  })
}

这是控制台日志：

【问题讨论】：

做“第一个项目......被复制，而不是添加”意味着你希望它从源数组中删除项目（这是否适用于所有项目，而不仅仅是第一个）？您能否向我们展示控制台输出中的数组“应有的样子”？
是的，它应该从源中删除并添加到一个新数组中，它只发生在第一个元素上。

标签： javascript arrays svelte-3

【解决方案1】：

问题是每个循环中的关键：

{#each initialCards.filter(c => c.compare === false) as card}
   <Card {card} on:mark={changeList(card)}/>
{/each}

应该是：

{#each initialCards.filter(c => c.compare === false) as card,i (card.compare)}
  <Card {card} on:mark={changeList(card.compare)}/>
{/each}

然后相应地改变函数。

【讨论】：