Svelte点击事件失效咨询：TypeError: each_value is undefined

嘿，我刚仔细看了你提供的那个Svelte示例，这个报错的根源其实是你处理数组元素删除时的一个小失误，咱们来理清楚：

问题出在哪？ #

你代码里的删除逻辑大概是这么写的（简化后的核心代码）：

{#each items as item, i}
  <div>
    {item.content}
    <button on:click="{() => items = items.splice(i, 1)}">删除</button>
  </div>
{/each}

这里的坑是**Array.splice()方法的返回值不是修改后的原数组**——它会直接修改原数组，但返回的是被删除的元素组成的数组。所以当你执行items = items.splice(i, 1)时，你其实是把items替换成了刚删掉的那一个（或几个）元素的数组，而不是剩下的元素。

举个例子：如果原数组是[a, b, c]，执行items.splice(1,1)后，原数组会变成[a,c]，但这个方法返回的是[b]。你把items赋值成[b]，这就完全打乱了Svelteeach循环的数据源逻辑。当数组被删到最后一个元素时，这个操作会让items变成包含最后一个元素的数组，后续再点击删除，就会出现循环找不到合法遍历值的情况，直接抛出each_value is undefined。

正确的两种写法 #

写法一：直接修改原数组（最简单）

既然splice已经直接修改了原数组，Svelte会自动响应数组的变化，所以不需要重新赋值items：

<button on:click="{() => items.splice(i, 1)}">删除</button>

写法二：用不可变方式创建新数组（更符合现代前端理念）

如果你不想直接修改原数组，可以用filter生成新数组，再赋值给items，Svelte同样能正确检测到变化：

<button on:click="{() => items = items.filter((_, idx) => idx !== i)}">删除</button>

额外提示 #

你用的是Svelte 1.56.1，这是个比较老的版本了，虽然这个问题在新版本里也会出现，但新版本的错误提示会更直观。如果项目允许的话，升级到较新的Svelte版本，开发时能少踩不少坑哦。

内容的提问来源于stack exchange，提问作者Sks D.