TypeError:在Svelte中未定义ctx[3]

Question

完全迷失了为什么这是打破的。我正在开发一个自动完成类组件，它可以很好地处理一系列字符串。但是我正在将它转换为使用带有键slug和name的对象数组，现在我得到了一个前所未有的类型错误。

  {#if filteredPlants.length > 0}
    <hr class="mx-4"/>
    <ul class="mx-4 my-4">
      {#each filteredPlants as plant, index}
        <li
          class={`py-1 rounded-lg ${hiLitedPlant.name === plant.name ? 'bg-black text-white' : ''}`}
          on:mouseenter={() => hiLiteIndex = index}
          on:click={() => navigate(hiLitedPlant.slug)}
          on:keydown={navigateList}
        >
          <p class="mx-2">{plant.name}</p>
        </li>
      {/each}           
    </ul>
  {/if}

过滤工作正常。如果我控制日志，它会输出预期的值，但是在拥有filteredPlants.length > 0之后，它就会开始抛出一个Uncaught (in promise) TypeError: ctx[3] is undefined。如果我从循环中删除索引变量，那么如果这有帮助的话，它将变成ctx2。我使用的是类型记录，所以如果是打字问题，我不知道为什么要编译

Answer 1

这个错误来自于顺风类内部。访问hiLitedPlant.name会引发错误，因为在用户能够交互之前，第一次呈现它是未定义的。

let hiLiteIndex: number = -1;
$: hiLitedPlant = filteredPlants[hiLiteIndex] ?? { name: '', slug: ''};     

on:click={() => navigate(plant.slug)}

这个修好了